Adjust List row separator visibility and color in SwiftUI

In this tutorial, we will see how to adjust the List row separator visibility and color in SwiftUI.

We can adjust the separator visibility and color for a List by using the listRowSeparator and listRowSeparatorTint() modifier. This modifier allows us to customize the appearance of separators between rows in a List.

Create simple a List

First of all, I will create a simple List to display a series of items in our app. It is like making a list of things that we want to show on the screen.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<15) { index in
                Text("Item \(index)")
            }
        }
        
    }
}

In the above program, I have created a scrollable list of 14 items, and each item is labeled “Item 1“, “Item 2” and so on up to “Item 14“.

I have used a ForEach loop to dynamically generate these items inside a scrollable list based on the index variable.

Output:

Adjust the Separator Lines

As we can see in the above output, there is a line separator between each item in the list. We can hide those separators by using the listRowSeparator() modifier. Simply we have to pass the argument .hidden inside this modifier to do that.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<15) { index in
                Text("Item \(index)")
                    // Hide the List row separator
                    .listRowSeparator(.hidden)
            }
        }
        
    }
}

In the above program, I have applied the .listRowSeparator() modifier to the text view and passed .hidden as an argument to hide all the separators.

Output:

Change the color of the List row separator

We can also change the color of the List row separators using the listRowSeparatorTint() modifier. This modifier takes the color name as the argument. So, we can simply change the List row separator color by specifying the color we want as an argument to this modifier.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1..<15) { index in
                Text("Item \(index)")
                    // Change the color of the List row separator
                    .listRowSeparatorTint(.mint)
            }
        }
        
    }
}

In the above program, I have applied the .listRowSeparatorTint() modifier to the Text view and passed .mint to change the color of the separators to mint.

Output: