时间戳

首页 > 解决方案 > SwiftUI、导航视图和目的地的动画过渡。VStack 有效，但 List 无效

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

问题描述

如果我使用 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")
//                      }
//                  }
//              )
            }
        }
    }
}

标签： swiftuitransition

解决方案

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

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

推荐阅读