How to remove the line separators from a List in SwiftUI without using ForEach?
I have this code to display a list of custom rows.
struct ContentView : View {
var body: some View {
VStack(alignment: .leading) {
List(1...10) {_ in
CustomRow()
}
}
}
}
However, I want to remove the line on each row. I tried not using List
and instead using ForEach
inside ScrollView
but it completely removes all the styling including its padding and margins. I just want to remove the lines and nothing else.
Please help, thank you.
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:
you may consider using a LazyVStack
inside a ScrollView
instead (because iOS is NOT supporting appearance for SwiftUI lists anymore).
iOS 13:
⚠️ This method is deprecated and it's not working from iOS 14
There is a UITableView
behind SwiftUI's List
for iOS 13. 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
Example of usage
init() {
if #available(iOS 14.0, *) {
// iOS 14 doesn't have extra separators below the list by default.
} else {
// 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")
}
}
Note that a static list doesn't show extra separators below the list by default
iOS 15+:
Simply add .listRowSeparator(.hidden)
as a modifier to the view contained in the List
. https://developer.apple.com/documentation/swiftui/texteditor/listrowseparator(_:edges:)
List {
ForEach(garage.cars) { car in
Text(car.model)
.listRowSeparator(.hidden)
}
}
iOS 13 only:
Adding UITableView.appearance().separatorColor = .clear
anywhere in your code before the List
appears should work. While this solution removes the separators, note that all List
instances will be bound to this style as there’s no official way currently to only remove separators of specific instances. You may be able to run this code in onAppear
and undo it in onDisappear
to keep styles different.
Also note that this code assumes Apple is using a UITableView
to back List
which is not true in the iOS 14 SDK. Hopefully they add an official API in the future. Credit to https://twitter.com/singy/status/1169269782400647168.