swift - 在带有凹口的横向 iPhone 上，以动画形式滑入表单会导致视觉故障

Question

我有一个按钮可以在 SwiftUI 中从左侧滑入设置菜单，一切都运行良好，直到我从 iPhone SE 切换到 iPhone 11 模拟器!

问题在于，使用 ZStack 将表单覆盖在界面上，然后对该表单的外观进行动画处理会导致出现视觉故障，其中行内包含的元素会超出单元格宽度。此剪辑发生在动画开始时，并在动画完成后保持在原位。

如果动画已禁用、设备为纵向或没有凹口的设备，则不会发生这种情况。

通过旋转设备或使用“NO ANIM”按钮使 View 重新绘制可以修复该故障，直到您再次对其进行动画处理为止。

在这种情况下，更改为 .opacity 的过渡有效，但 .opacity 在某些 View 结构中也存在相同的问题...

我尝试以不同的方式构建它，其中菜单始终存在，但只是偏移，因此它不在屏幕上，再次出现同样的问题。

我认为这是 SwiftUI 中的错误，因此已提交错误报告。但是有人有解决方法吗？

Xcode 版本 = 11.5，iOS 版本 = 13.5

struct ContentView: View {
   @State var menuOpen = true
   @State var bar = false

   var body: some View {
      ZStack(alignment: .leading) {
         HStack {
            Spacer()
            VStack {
            Button(action: {
               withAnimation(.default) {
                  self.menuOpen.toggle()
               }
            }) {
               Text("MENU ANIM")
            }
               Button(action: {
                     self.menuOpen.toggle()
               }) {
                  Text("MENU NO ANIM")
               }
            }
         }
         if menuOpen {
            Form {
               Section(header: Text("SETTINGS")) {
                  Toggle(isOn: $bar) { Text("Toggle") }
                  Toggle(isOn: $bar) { Text("Toggle")  }
               }
            }
            .frame(width:300, alignment: .topLeading)
               .transition(.move(edge: .leading))
         }
      }
      .frame( maxWidth: .infinity, maxHeight: .infinity)
   }
}

Answer 1

显式行插入解决了该问题(使用 Xcode 11.4/iOS 13.4 测试)

Form {
   Section(header: Text("SETTINGS")) {
      Toggle(isOn: $bar) { Text("Toggle") }
      Toggle(isOn: $bar) { Text("Toggle")  }
   }
   .listRowInsets(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)) // << here !!
}
.frame(width:300, alignment: .topLeading)
.transition(.move(edge: .leading))