SwiftUI TabView 动画

Question

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

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

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.使用 .transition() 我们只指定应该发生哪个转换。

2.只有在显式动画发生时才会发生转换(如预期的那样)。

3.发生变化时动画发生(状态，绑定(bind))

这是一种可能的方法。

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