动画导致从视图中断 SwiftUI

Question

我一直在尝试为 SwiftUI 中包含Form视图的 2 个视图之间的过渡设置动画。 但是，仅当 animation 应用时，布局才会中断。

这是一个完全可重现的例子。 （仅在真实设备/模拟器上重现 - 而不是在操场上）。

为什么视图会以这种方式中断？ 是否有解决方法来告诉视图正确重新布局？ （iOS 15，XCode 13.2）

struct ContentView: View {
    @State var first = true
    @State var presented = false
    
    var body: some View {
        Button("show") {
            presented.toggle()
        }.fullScreenCover(isPresented: $presented) {
            if first {
                Form {
                    Section(header: Text("First")) {
                        TextField("Name", text: .constant("foobar"))
                    }
                    Section(header: Text("Description")) {
                        TextEditor(text: .constant("foobar"))
                            .frame(minHeight: 200)
                    }
                    Button("next") {
                        withAnimation() {
                            first.toggle()
                        }
                    }
                }
                .transition(.opacity)
            } else {
                Form {
                    Section(header: Text("Second")) {
                        TextField("Name", text: .constant("foobar"))
                    }
                    Section(header: Text("Description")) {
                        TextEditor(text: .constant("foobar"))
                            .frame(minHeight: 200)
                    }
                    Button("previous") {
                        withAnimation() {
                            first.toggle()
                        }
                    }
                }.transition(.opacity)
            }
        }
    }
}

这是问题的 GIF：

Answer 1

检查揭秘 Swiftui https://developer.apple.com/videos/play/wwdc2021/10022/

如果在转换发生时保持表单，则工作正常

struct ContentView: View {
    @State var first = true
    @State var presented = false

    var body: some View {
        Button("show") {
            presented.toggle()
        }.fullScreenCover(isPresented: $presented) {
            Form {
                if first {
                    Section(header: Text("First")) {
                        TextField("Name", text: .constant("foobar"))
                    }
                    .transition(.opacity)
                    Section(header: Text("Description")) {
                        TextEditor(text: .constant("foobar"))
                            .frame(minHeight: 200)
                    }
                    .transition(.opacity)
                    Button("next") {
                        withAnimation {
                            first.toggle()
                        }
                    }
                    .transition(.opacity)
                } else {
                    Section(header: Text("Second 2")) {
                        TextField("Name 2", text: .constant("foobar 2"))
                    }
                    .transition(.opacity)
                    Section(header: Text("Description 2")) {
                        TextEditor(text: .constant("foobar 2"))
                            .frame(minHeight: 200)
                    }
                    .transition(.opacity)
                    Button("previous") {
                        withAnimation {
                            first.toggle()
                        }
                    }
                    .transition(.opacity)
                }
            }
        }
    }
}