仅忽略列表行的 SafeArea

Question

我有以下观点：

struct Example: View {
    var body: some View {
        List{
            Color.red
                .listRowInsets(EdgeInsets())
            Color.blue
                .listRowInsets(EdgeInsets())
        }
        .listStyle(.grouped)
        List{
            Color.green
                .listRowInsets(EdgeInsets())
            Color.yellow
                .listRowInsets(EdgeInsets())
        }
        .listStyle(.grouped)
        .ignoresSafeArea()
    }
}

生成以下布局： 现在，我真正想要的是第一个列表中的蓝色列表行与第二个列表中的绿色和黄色列表行一样宽（忽略安全区域）。但我想保持红色的宽度与现在一样宽（尊重安全区域）。我怎样才能做到这一点？仅将

.ignoresSafeArea()

添加到蓝色列表行没有任何效果。

Answer 1

修改器

.ignoresSafeArea()

仅在视图已经与安全区域插图的边缘接触时才起作用。如果不是，则没有效果，

List

内的行可能就是这种情况。

您始终可以以其他方式执行此操作并忽略整个

List

的安全区域插入（就像您在第二个示例中所做的那样），然后在要保留在安全区域内的行上添加填充或行插入。

GeometryReader

可用于测量安全区域插图的大小：

var body: some View {
    GeometryReader { proxy in
        VStack {
            List{
                Color.red
                    .listRowInsets(EdgeInsets())
                    .padding(.leading, proxy.safeAreaInsets.leading)
                    .padding(.trailing, proxy.safeAreaInsets.trailing)
                Color.blue
                    .listRowInsets(EdgeInsets())
            }
            .listStyle(.grouped)
            .ignoresSafeArea()

            List{
                Color.green
                    .listRowInsets(EdgeInsets())
                Color.yellow
                    .listRowInsets(EdgeInsets())
            }
            .listStyle(.grouped)
            .ignoresSafeArea()
        }
    }
}