How to change SwiftUI list row background color

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

How to change SwiftUI list row background color

We can change the background color of a list row in SwiftUI with listRowBackground(_:) modifier.

To set a list row background color, add listRowBackground(_:) modifier to the list row item.

You can use listRowBackground(_:) in two places:

1. On a List row item.
2. On a ForEach that populates list row item.

struct ContentView: View {
    var body: some View {
        List {
            ForEach((1...100), id: \.self) {
                Text("Row \($0)")
                    .listRowBackground(Color.pink)
            }
            // This also work
            // .listRowBackground(Color.pink)
        }
        // This won't work
        // .listRowBackground(Color.pink)
    }
}

One thing to note here is a list row item appearance varies based on the list style. It might not look good on all of them.

Here are what it look like on .plain, .inset, .grouped, .insetGrouped, and .sidebar list style.