SwiftUI、导航视图和目的地的动画转换.VStack有效，但List无效

Question

圆角矩形"动画化出"；但是"；"卡入"；如果我使用List。是SwiftUI错误还是我？

此外，如果第三个导航链接被注释掉，则矩形视图中的按钮会将应用程序弹回到导航视图。下次我去看矩形时，它已经改变了颜色。只有VStack才会发生这种情况，List不受影响。这毫无意义。

import SwiftUI
struct ContentView: View {
@State var fff: Bool = false
var body: some View {
NavigationView {
VStack { // <---- This works if I have three navigation links, but not if I have only two.
//          List { // <------ This does not work.
NavigationLink(
destination:
ZStack {
if fff {
RoundedRectangle(cornerRadius: 100) .foregroundColor(.blue)
.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
.animation(.easeIn)
}
else {
RoundedRectangle(cornerRadius: 100) .foregroundColor(.purple)
.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
.animation(.easeIn)
}
Button(action: {
fff.toggle()
}, label: {
Text("Button")
})
}
,
label: {
Text("To rectangles")
}
)
NavigationLink(
destination: Text("Settings"),
label: {
HStack {
Image(systemName: "wrench")
Text("Settings")
}
}
)
//              NavigationLink( <--- If this link is commented out then the button in the rectangles view pops the app back to the Navigation view (only when using VStack).
//                  destination: Text("Store"),
//                  label: {
//                      HStack {
//                          Image(systemName: "cart")
//                          Text("Store")
//                      }
//                  }
//              )
}
}
}
}

Answer 1

将目标移动到不同的结构可以修复此问题。

struct RectView: View {
@State var fff: Bool = false
var body: some View {
ZStack {
if fff {
RoundedRectangle(cornerRadius: 100) .foregroundColor(.blue)
.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
.animation(.easeIn)
} else {
RoundedRectangle(cornerRadius: 100) .foregroundColor(.purple)
.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
.animation(.easeIn)
}
Button(action: {
fff.toggle()
}, label: {
Text("Button")
})
}
}
}