ios - 如何忽略容器的安全区域并尊重 Swift UI 中内容的安全区域

Question

我正在尝试在 swift ui 中创建一个看起来像这样的底部工作表

https://user-images.githubusercontent.com/33900517/172068237-4dd58374-b6e6-4340-a913-7085fb64b254.mp4

我的问题是我有一个动画底页，但因为它忽略了安全区域，所以当我点击文本字段时它不会随键盘展开。

我该如何解决这个问题，使 View 随键盘扩展，但底部的白色仍然超出安全区域？

即包含 View 应忽略安全区域，并且其中的内容应遵守安全区域。

这是底部的代码片段，完整的例子可以在这里找到 https://gist.github.com/CTOverton/4fbfb8db2de31f3b5f5ef9ee88e8f744

   var body: some View {
    GeometryReader { geometry in
      VStack() {
        self.content
      }
      .padding(.vertical, 34)
      .padding(.horizontal, 16)
//      .frame(width: geometry.size.width, height: geometry.size.height * heightRatio, alignment: .top)
      .frame(width: geometry.size.width, height: self.maxHeight, alignment: .top)
      .background(Color(.white))
      .cornerRadius(Constants.radius)
      .frame(height: geometry.size.height, alignment: .bottom)
      .offset(y: max(self.offset + self.translation, 0))
      .animation(.interactiveSpring())
      .gesture(
          DragGesture().updating(self.$translation) { value, state, _ in
                state = value.translation.height
              }.onEnded { value in
                let snapDistance = self.maxHeight * Constants.snapRatio
                guard abs(value.translation.height) > snapDistance else {
                  return
                }
                self.isOpen = value.translation.height < 0
              }
      )
    }
    .edgesIgnoringSafeArea([.bottom, .horizontal])
    .shadow(color: Color(hue: 1.0, saturation: 0.0, brightness: 0.0, opacity: 0.08), radius: 12, y: -8)
  }

我已经尝试了 .ignoreSafeArea() 和 .safeAreaInset() 的各种配置，但我似乎无法完全正确。

这里还有一些图片供引用

Answer 1

实际上，不是忽略所有内容的安全区域(这会导致问题)，而是我们只在背景中需要它，所以问题是在这种情况下如何正确构建背景。

注意:.cornerRadius 在这里也不合适，因为它会剪切内容

这是修复的主要部分。使用 Xcode 13.4/iOS 15.5 测试

.background(
    RoundedRectangle(cornerRadius: Constants.radius)  // corners !!
        .fill(.white)                                 // background !!
        .edgesIgnoringSafeArea([.bottom, .horizontal]) // << only here !!
)

Complete test module is here