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

Question

So the question is pretty simple and it\'s in the title. I want to remove the line separator in SwiftUI iOS 14. Previously, I was using UITableView().appearance().sep

Answer 1

The above answer work for me, you have to set only below both function:

.listRowInsets(EdgeInsets())

.background(Color.white)

Answer 2

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

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

Answer 3

If you don't have a lot of cells, and therefore don't need to rely on a LazyVStack for performance, you can fallback to a ScrollView + VStack:

ScrollView {
  VStack {
    Row1()
    Row2()
    Row3()
  }
}

Answer 4

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

Answer 5

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

Answer 6

You can also call this function at the end of your VStack (that is inner the List).

It will be an overlay on List Seperator on iOS 14 :)

private func hideDefaultListSeperator() -> some View {
    Rectangle()
        .fill(colorScheme == .light ? Color.white : Color.black)
        .frame(maxHeight: 1)
}