How to remove List Separator lines in SwiftUI 2.0 in iOS 14 How to remove List Separator lines in SwiftUI 2.0 in iOS 14 xcode xcode

How to remove List Separator lines in SwiftUI 2.0 in iOS 14


Here is a demo of possible solution. Tested with Xcode 12b.

demo

List {    ForEach(0..<3) { _ in        VStack {            Text("Hello, World!").padding(.leading)        }        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)        .listRowInsets(EdgeInsets())        .background(Color.white)    }}


How I made a list that works on both iOS 14 and iOS 13, It shows no separators and extra margins

struct NoButtonStyle: ButtonStyle {    func makeBody(configuration: Self.Configuration) -> some View {        configuration.label    }}struct ListWithoutSepatorsAndMargins<Content: View>: View {        let content: () -> Content            var body: some View {            if #available(iOS 14.0, *) {                ScrollView {                    LazyVStack(spacing: 0) {                        self.content()                    }                    .buttonStyle(NoButtonStyle())                }            } else {                List {                    self.content()                }                .listStyle(PlainListStyle())                .buttonStyle(NoButtonStyle())            }        }    }

Sample Usage -

ListWithoutSepatorsAndMargins {    ForEach(0..<5) { _ in      Text("Content")    }}

in case you've more components in list, wrap them in Group

                ListWithoutSepatorsAndMargins {                    Group {                            self.groupSearchResults()                            self.myGroups()                            self.exploreGroups()                        }                    }                }    

Hope this helps someone, I wasted a lot of time in such minor thing, Apple is trying to push us hard to use LazyVStack, it seems


Merged @asperi, @akmin and @zrfrank answer into one thing. In my experience List is more reliable and efficient than LazyVStack, so I use still use List for anything complex requiring reliability.

extension View {    func listRow() -> some View {        self.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)            .listRowInsets(EdgeInsets(top: -1, leading: -1, bottom: -1, trailing: -1))            .background(Color(.systemBackground))    }}List {    Color.red         .listRow()    Color.green         .listRow()}