swift - How to remove "row" separators/dividers from a List in SwiftUI?

Question

I'm trying to remove the "row" separators (known as dividers in SwiftUI) from a List in SwiftUI.

I went through the List documentation, but I haven't been able to find a modifier for that.

Any help would be appreciated.

Answer 1

iOS 15:

This year Apple introduced a new modifier .listRowSeparator that can be used to style the separators. you can pass .hidden to hide it:

List {
    ForEach(items, id:.self) { 
        Text("Row ($0)")
            .listRowSeparator(.hidden)
    }
}

---

iOS 14

Apple introduced LazyVStack In iOS 14. you may consider using it instead of list for this:

ScrollView {
    LazyVStack {
        ForEach((1...100), id: .self) {
           Text("Placeholder ($0)")
        }
    }
}

Keep in mind that LazyVStack is lazy and doesn't render all rows all the time. So they are very performant and suggested by Apple itself in WWDC 2020.

---

iOS 13

There is a UITableView behind SwiftUI's List for iOS. So to remove

Extra separators (below the list):

you need a tableFooterView and to remove

All separators (including the actual ones):

you need separatorStyle to be .none

init() {
    // To remove only extra separators below the list:
    UITableView.appearance().tableFooterView = UIView()

    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none
}

var body: some View {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}