Since iOS 15, we have a new modifier to customize the appearance of a list view. To change the color of the line separators, you can use listRowSeparatorTint as in this example:
List {
ForEach(restaurants.indices, id: \.self) { index in
if(0...1).contains(index) {
FullImageRow(restaurant: restaurants[index])
}else{
BasicImageRow(restaurant: restaurants[index])
}
}
.listRowSeparatorTint(.blue)
}
.listStyle(.plain)Using the modifier listRowSeparatorTint we change the code to blue as we can see in the following image:
How to change the Top or Bottom List Row separator color
Some list styles like .plain display both separator lines at the start and end of the list, as seen in the image above.
The .listRowSeparatorTint(_:edges:) modifier has an optional second argument where you can specify where the color is applied.
By default it is applied to all edges.
In the following code we can see the use of this modifier:
List {
ForEach(restaurants.indices, id: \.self) { index in
if(0...1).contains(index) {
FullImageRow(restaurant: restaurants[index])
}else{
BasicImageRow(restaurant: restaurants[index])
}
}
.listRowSeparatorTint(.blue, edges: .top)
}
.listStyle(.plain)The result in XCode is as follows:
If you look closely you can see that only the separator lines at the top are colored blue, leaving the separator below in gray by default.
