如何在 SwiftUI 中使用 edgesIgnoringSafeArea，但让子视图尊重安全区域？答案

【问题标题】：How can I use edgesIgnoringSafeArea in SwiftUI, but make a child view respect the safe area?如何在 SwiftUI 中使用 edgesIgnoringSafeArea，但让子视图尊重安全区域？
【发布时间】：2020-06-25 20:08:10
【问题描述】：

我正在构建的 UI 是带有列表视图的 SwiftUI，我想在列表视图的一部分上放置一个面板，上面有一个按钮。

在底部有安全区域的设备上（没有物理主页按钮）我希望面板转到屏幕底部。但我想确保面板上的按钮不会延伸到安全区域。

在我的示例代码中，HStack 是包含按钮的面板。我尝试将.edgesIgnoringSafeArea(.bottom) 添加到它，但这不允许它延伸到底部。这让我有点困惑，因为同一 ZStack 中的 List 延伸到底部安全区域。

当我将.edgesIgnoringSafeArea(.bottom) 添加到ZStack 时，HStack（蓝色面板）被允许延伸到屏幕底部的安全区域。这就是我想要的，但是一旦我这样做了，我怎么能告诉Button 是HStack 的孩子不忽略安全区域？

我知道如何在 UIKit 中做到这一点，但我真的希望能够在 SwiftUI 中构建这个 UI。我可以手动添加一些填充或 Spacers 以在 Button 下添加额外的填充以考虑安全区域，但是在没有底部安全区域的带有主页按钮的设备上会有额外的间距。我想找到一个优雅的解决方案，我可以依靠系统来定义其安全区域，而不是手动定义任何数字间距或为不同设备创建条件情况。

struct ContentView: View {
    var body: some View {

        ZStack(alignment: .bottom) {

                    List {
                        Text("Item 1")
                        Text("Item 2")
                        Text("Item 3")
                    }

                    HStack {
                        Spacer()
                        Button(action: {
                            // do something
                        }){
                            Text("Button")
                                .font(.title)
                                .padding()
                                .background(Color.green)
                                .foregroundColor(.white)
                                .cornerRadius(15)
                        }.padding()
                        Spacer()
                    }.background(Color.blue).edgesIgnoringSafeArea(.bottom)
                }
    }
}

【问题讨论】：

标签： ios swiftui

【解决方案1】：

加上@Joe Susnick 的回答，完整的代码是：

VStack {

}.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(red: 0.357, green: 0.784, blue: 0.016, opacity: 0.5).ignoresSafeArea()
)

VStack 内的任何内容都尊重安全区域，而背景则填满整个屏幕。

【讨论】：

【解决方案2】：

edgesIgnoringSafeArea(_:) 已弃用

使用以下内容：


.background(Color.blue.ignoresSafeArea(edges: .bottom))

【讨论】：

【解决方案3】：

无论您在背景修改器中绘制什么视图，都将使用它正在修改的视图的框架。所以你需要告诉那个视图忽略安全区域。

.background(Color.blue.edgesIgnoringSafeArea(.bottom))

【讨论】：

是的，非常有帮助:)
最佳答案。不接受这让我很生气
刚刚拯救了我的一天
使用.vertical而不是.bottom你也可以在顶部扩展背景
就是这样！最佳答案。应该在上面。

【解决方案4】：

您可以使用 GeometryReader 访问安全区域的高度。然后您可以将安全区域的高度用作按钮的底部填充或偏移量。
https://developer.apple.com/documentation/swiftui/geometryproxy

struct ContentView: View {
    var body: some View {

        GeometryReader { proxy in
            ZStack(alignment: .bottom) {

                List {
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                }

                HStack {
                    Spacer()
                    Button(action: {
                        // do something
                    }){
                        Text("Button")
                            .font(.title)
                            .padding()
                            .background(Color.green)
                            .foregroundColor(.white)
                            .cornerRadius(15)
                    }
                    .padding(.bottom, proxy.safeAreaInsets.top)
                    Spacer()
                }.background(Color.blue)
            }.edgesIgnoringSafeArea(.bottom)
        }
    }
}

【讨论】：

这在 NavigationView 中不起作用，也是一个不好的答案（请参阅@Joe Susnick 的答案）。
不幸的是，使用 GeometryReader 会产生各种间距问题……它会扩展以占用所有可用空间。