如何使 SwiftUI 列表行背景颜色扩展整个宽度，包括安全区域之外 [英] How can I make a SwiftUI List row background color extend the full width, including outside of the safe area

问题描述

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

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.

示例代码:

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

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

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

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

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

推荐答案

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

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

这篇关于如何使 SwiftUI 列表行背景颜色扩展整个宽度，包括安全区域之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！