如何在 SwiftUI 中使用 edgeIgnoringSafeArea，但让子视图尊重安全区域? [英] How can I use edgesIgnoringSafeArea in SwiftUI, but make a child view respect the safe area?

问题描述

我正在构建一个带有列表视图的 SwiftUI 用户界面，我想在列表视图的一部分上放置一个面板，上面有一个按钮.

I'm building a UI is SwiftUI with a list view, and I want to put a panel over part of the list view with a button on it.

在底部具有安全区域的设备(没有物理主页按钮)上，我希望面板位于屏幕底部.但我想确保面板上的按钮不会延伸到安全区域.

On devices with a safe area at the bottom (that don't have a physical home button) I want the panel to go to the bottom of the screen. But I want to make sure that the button on the panel doesn't extend into the safe area.

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

In my example code, the HStack is the panel that contains the button. I tried adding .edgesIgnoringSafeArea(.bottom) to it, but that doesn't allow it to extend to the bottom. This is kind of confusing to me, because the List that's in the same ZStack extends into the bottom safe area.

当我将 .edgesIgnoringSafeArea(.bottom) 添加到 ZStack 时，允许 HStack(蓝色面板)扩展到保险箱中屏幕底部的区域.这就是我想要的，但是一旦我这样做了，我怎么能告诉 Button 它是 HStack 的孩子 not 忽略安全区?

When I add .edgesIgnoringSafeArea(.bottom) to the ZStack, the HStack (blue panel) is allowed to extend into the safe area at the bottom of the screen. This is what I want, but then once I do that, how can I tell the Button that's a child of the HStack to not ignore the safe area?

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

I know how I would do this in UIKit, but I'm really hoping to be able to build this UI in SwiftUI. I could manually add some padding or Spacers to add extra padding under the Button to account for the safe area, but then there would be extra spacing on devices with a home button that don't have a bottom safe area. I'd like to figure out an elegant solution where I can rely on the system to define its safe areas instead of manually defining any spacing numerically or creating conditional situations for different devices.

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

推荐答案

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

You can access the height of the safe area using a GeometryReader. Then you could use the height of the safe area as bottom padding or offset on your button.
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)
        }
    }
}

这篇关于如何在 SwiftUI 中使用 edgeIgnoringSafeArea，但让子视图尊重安全区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！