如何优雅地解决 SwiftUI 上的顶栏问题？答案

【问题标题】：How to solve this top bar problem on SwiftUI, elegantly?如何优雅地解决 SwiftUI 上的顶栏问题？
【发布时间】：2021-01-25 20:10:12
【问题描述】：

我正在尝试将整个 iPhone 区域用于我的应用程序。

我在顶部有这个 HStack，用于创建自定义工具栏。

var body: some View {

  VStack (spacing:0) {
  
    MyTopbar()
    // other controls

    Spacer()
  }
  .edgesIgnoringSafeArea(.top)

这在带有凹槽的新设备和没有凹槽的旧设备上看起来像这样。缺口削减了我的菜单。

我可以通过在垂直堆栈上的MyTopbar() 之前添加一个框架高度的间隔来解决这个问题，但首先这似乎是一个非常糟糕的解决方案。首先，我必须猜测那个垫片的高度。然后我必须检测设备是否有缺口（？）。

有没有更好的办法？

【问题讨论】：

您确定MyTopbar（或层次结构中的任何容器）不是ignoresSafeArea()？因为我可以看到默认情况下您的VStack 应该尊重安全区域并自动为您处理这种情况。
VStack 是忽略保险箱的，但就像我说的，我正在尝试将所有区域用于应用程序
我可能对此理解不佳，但您所描述的是尊重（顶部）安全区域布局指南（您的顶部栏）和其他内容不（您希望在栏上方或下方全屏显示的任何内容 - 但不在同一个容器中）。例如ZStack，其中“bg”会忽略而顶栏不会）。我希望这是有道理的......

标签： swiftui

【解决方案1】：

您可以将其视为层（尊重安全区域的内容和不尊重安全区域的内容）。

可能是这样的：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea() // Whatever view fills the whole screen

            VStack (spacing:0) {
                MyTopbar()
                // other controls
                Spacer()
            }
        }
    }
}

【讨论】：

【解决方案2】：

添加具有安全区域高度的清晰颜色的可能解决方案。无需过多计算。

var body: some View {

  VStack (spacing:0) {
    Color.clear.frame(height: Color.clear.frame(height: UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
    MyTopbar()
    // other controls

    Spacer()
  }
  .edgesIgnoringSafeArea(.top)

【讨论】：