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

user_5513562 0
Viewed 2350

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.

List running on iPhone 12 Pro Max in landscape, with the far left of the cell appearing white, unlike the rest of the cell which is grey

swiftui-list swiftui swift ios
1 Answers

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())
    }
}
user_55135620
Related