SwiftUI、导航视图和目的地动画过渡。 VStack 有效但 List 无效

时间:2021-05-02 00:00:32

标签: swiftui transition

如果我使用 List,RoundedRectangle 会“动画化”但“嵌入”。 是 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")
//                      }
//                  }
//              )
            }
        }
    }
}

1 个答案:

答案 0 :(得分:0)

将目标移动到不同的结构可以解决问题。

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")
            })
        }
    }
}