Question

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

在底部具有安全区域的设备（没有物理主页按钮）上，我希望面板位于屏幕底部。但是我要确保面板上的按钮没有延伸到安全区域。

在我的示例代码中，import {omit} from 'lodash-es';是包含按钮的面板。我尝试在其中添加HStack，但这不允许它扩展到底部。这让我感到困惑，因为位于同一.edgesIgnoringSafeArea(.bottom)中的列表扩展到了底部安全区域。

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

我知道我将如何在UIKit中执行此操作，但是我真的希望能够在SwiftUI中构建此UI。我可以手动在HStack下添加一些填充或空格来添加额外的填充，以解决安全区域的问题，但是带有Home按钮且底部没有安全区域的设备会存在额外的间隔。我想找到一种优雅的解决方案，在该解决方案中，我可以依靠系统来定义其安全区域，而不用手动为数字定义任何间距或为不同设备创建条件情况。

Button

Answer 1

在背景修改器中绘制的任何视图都将使用其正在修改的视图框架。因此，您需要告诉THAT视图忽略安全区域。

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

Answer 2

您可以使用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)
        }
    }
}

Answer 3

edgesIgnoringSafeArea(_:) 已弃用

使用以下内容：


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

如何在SwiftUI中使用edgeIgnoringSafeArea，但使子视图尊重安全区域？

3 个答案: