SwiftUI TabView 动画答案

【问题标题】：SwiftUI TabView AnimationSwiftUI TabView 动画
【发布时间】：2021-04-26 13:39:21
【问题描述】：

我目前在我的应用程序上面临一个 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 按预期正确调用，因此应触发所有转换。

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

谢谢

【问题讨论】：

对不起。最近我的工作量很大，而这个特殊的问题在我的优先级中很低。我确实对其进行了快速测试，并且效果很好。

标签： swift swiftui ios14

【解决方案1】：

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

2.Transition 发生（如预期），仅在显式动画发生时发生。

3.当变化发生时发生动画(State, Binding)

这是一种可能的方法。

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

【讨论】：