如何使 SwiftUI 列表行背景颜色扩展整个宽度,包括安全区域之外

问题描述

在 SwiftUI List 中,如何使列表行背景(通过 .listRowBackground() 设置)扩展视图的整个宽度,即使在安全区域之下?例如。在宽屏 iPhone(例如 iPhone 12 Pro Max)上横向运行时。目前,该单元格在该单元格的最左侧显示为白色,直到安全区域的开始。

示例代码

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

这会生成如下所示的 UI。我希望单元格的灰色背景扩展设备的整个宽度。

我尝试将 .edgesIgnoringSafeArea(.all) 添加Text 中,但没有任何区别。

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

解决方法

答案是将 .edgesIgnoringSafeArea([.leading,.trailing]) 放在背景 Color 本身,而不是列表项上。

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