How to remove List Separator lines in SwiftUI 2.0 in iOS 14
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) }}
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()}