How can I make a SwiftUI List row background color extend the full width, including outside of the safe area

Question

In a SwiftUI List, how can I make a list row background (set via .listRowBackground()) extend the full width of the view, even under the safe area? E.g. when running in landscape on a wide iPhone (iPhone 12 Pro Max, for example). Currently, the cell appears white on the far left of the cell until the start of the safe area.

Example code:

struct ContentView: View {
    var body: some View {
        List {
            Text("Test")
                .listRowBackground(Color(.systemGray3))
        }.listStyle(GroupedListStyle())
    }
}

This produces a UI as shown below. I would like the grey background of the cell to extend the full width of the device.

I've tried adding .edgesIgnoringSafeArea(.all) to the Text but it makes no difference.

Andrew Bennet Andrew Bennet · Accepted Answer · 2021-01-11T21:07:41

The answer is to put .edgesIgnoringSafeArea([.leading, .trailing]) on the background Color itself, rather than the list item.

struct ContentView: View {
    var body: some View {
        List {
            Text("Test").listRowBackground(
                Color(.systemGray3).edgesIgnoringSafeArea([.leading, .trailing])
            )
        }.listStyle(GroupedListStyle())
    }
}

How can I make a SwiftUI List row background color extend the full width, including outside of the safe area

1 Answers