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

Posted 2023-02-24

【中文标题】如何使 SwiftUI 列表行背景颜色扩展整个宽度，包括安全区域之外

【英文标题】：How can I make a SwiftUI List row background color extend the full width, including outside of the safe area

【发布时间】：2021-01-11 20:25:45

【问题描述】：

在 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，但没有任何区别。

【问题讨论】：

我爱你，我的男人......你的代码拯救了我的一天 :)

【参考方案1】：

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

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

【讨论】：

更短的版本是.edgesIgnoringSafeArea(.horizontal)。

这不起作用。更改颜色，您将实际应用默认行背景颜色，而不是拉伸文本空间。

这就是问题所在：将背景颜色扩展到安全区域，而不是文本。