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

And*_*net 5 ios swift swiftui swiftui-list

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

示例代码:

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

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

我尝试过添加.edgesIgnoringSafeArea(.all)Text没有什么区别。

在 iPhone 12 Pro Max 上横向运行的列表,单元格的最左侧显示为白色,与单元格的其余部分为灰色不同

And*_*net 7

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

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

  • 较短的版本是“.edgesIgnoringSafeArea(.horizo​​ntal)”。 (3认同)