SwiftUI TabView 动画

Posted 2023-02-23

【中文标题】SwiftUI TabView 动画

【英文标题】：SwiftUI TabView Animation

【发布时间】：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 按预期正确调用，因此应触发所有转换。

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

谢谢

【问题讨论】：

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

【参考方案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