SwiftUI TabView 动画

Question

我目前在我的应用程序上遇到 pb。我想为由 SwiftUI TabView 控制的项目的插入和删除设置动画。

这是我能想到的最简单的重现问题的视图

struct ContentView: View {
    @State private var selection: Int = 1
    var body: some View {
        TabView(selection: $selection.animation(),
                content:  {
                    Text("Tab Content 1")
                        .transition(.slide) //could be anything this is for example
                        .tabItem { Text("tab1") }.tag(1)
                        .onAppear() {print("testApp")}
                        .onDisappear(){print("testDis")}
                    Text("Tab Content 2")
                        .transition(.slide)
                        .tabItem { Text("tab2") }.tag(2)
                })
       
    }
}

实际上是在点击 tabItem 时。它立即从“选项卡内容 1”切换到“选项卡内容 2”，我想为其设置动画（不是选项卡项目按钮实际选项卡内容）。 On Appear 和 onDisapear 按预期正确调用，因此应触发所有转换。

如果有人有想法开始合作我会很高兴

谢谢

Answer 1

1.with .transition() 我们只指定应该发生哪个转换。

2.Transition 发生（如预期的那样），仅当显式动画发生时。

3.Animation 发生变化时发生（状态，绑定）

这是一种可能的方法。

    struct ContentView: View {
        @State private var selection: Int = 1
        var body: some View {
            TabView(selection: $selection,
                    content:  {
                        ItemView(text:"1")
                            .tabItem { Text("tab1") }.tag(1)
                        ItemView(text: "2")
                            .tabItem { Text("tab2") }.tag(2)
                    })
            
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    
    
    struct ItemView: View {
        let text: String
        @State var hidden = true
        
        var body: some View {
            VStack {
                if !hidden {
                    Text("Tab Content " + text)
                        .transition(.slide) 
                }
            }
            .onAppear() { withAnimation {
                hidden = false
            }}
            .onDisappear(){hidden = true}
            
        }
    }

SwiftUI TabView 动画

SwiftUI TabView Animation

swift

swiftui

ios14