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")     } } 

Answer 2

iOS 13 builds only

while this solution works correctly let's clean up the work using ViewModifier

public struct ListSeparatorStyleNoneModifier: ViewModifier {     public func body(content: Content) -> some View {         content.onAppear {             UITableView.appearance().separatorStyle = .none         }.onDisappear {             UITableView.appearance().separatorStyle = .singleLine         }     } } 

now let's make a small extension that would help to hide the details

extension View {     public func listSeparatorStyleNone() -> some View {         modifier(ListSeparatorStyleNoneModifier())     } } 

As you can see, we’ve wrapped our appearance setting code into a neat little view modifier. you can declare it directly now

List {     Text("1")     Text("2")     Text("3") }.listSeparatorStyleNone()