【问题标题】:Is there a way to animate navigationbaritems with withAnimation(...?有没有办法用 withAnimation(...?
【发布时间】:2021-03-17 16:47:04
【问题描述】:

由于某种原因,SwiftUi withAnimation 在 navigationBarItems 修饰符中不起作用。有解决办法吗?我知道视图上的 .animation 修饰符是动画作品,但这对于更复杂的动画来说是不够的。

我想知道以前没有人问过这个问题,我想更多人有这个问题。有谁知道解决办法吗?

这里有一个例子:https://drive.google.com/file/d/1d2Ud2xxhVCJBCfBQwlZ1mJgTnyNpxc_-/view?usp=sharing


    struct TestView: View {
    
      @State var red = true
    
      var body: some View {
        NavigationView {

            VStack {
                HStack {
                    Rectangle()
                        .fill(red ? Color.red : .blue)
                        .onTapGesture {
                         
                         
                         withAnimation(Animation.easeIn(duration: 1), {
                                
                            red.toggle()
                            })
                        }
                    
                }
                
                
                Spacer()
                
            }
            
            
                
            .navigationTitle("Test")
            .navigationBarItems(leading:
                                    HStack {
                                        Rectangle()
                                            .fill(red ? Color.red : .blue)
                                            .onTapGesture {
                                             
                                             
                                                   withAnimation(Animation.easeIn(duration: 1), {
                                                    
                                                red.toggle()
                                                })
                                            }
                                    }
                                    
            )
        }
        
       }
    }


    struct TestView_Previews: PreviewProvider {
    
      static var previews: some View {
        TestView()
      }
    }
    

    ```


Edit: Aspires solution is valid for my original question. For some reason it still does not work in the context I am using it in:

    struct ContentView: View {
    
    
    @State var redColor = false

    var body: some View {
        NavigationView {
            
            Button("change Color", action: {
                withAnimation(Animation.easeIn(duration: 1), {
                    redColor.toggle()
                })
            })
            
            .navigationTitle("Test")
            .navigationBarItems(leading:
                                    RectView(redColor: $redColor)
            )
        }

     }
}


struct RectView: View {
    
    @State var red: Bool = false
    @Binding var redColor: Bool

    var body: some View {
        HStack {
             Rectangle()
                  .fill(red ? Color.red : .blue)
        }.onChange(of: redColor, perform: { _ in
            red.toggle()
        })
    }
}


  

【问题讨论】:

    标签: swift animation swiftui modifier navigationbaritems


    【解决方案1】:

    一种可能的解决方案是将依赖于状态的动画代码分离到独立视图中,如下所示。

    使用 Xcode 12.4 / iOS 14.4 测试

    struct TestBarAnimationView: View {
    
          @State var red = true
    
          var body: some View {
            NavigationView {
                VStack {
                    RectView(red: $red)       // << here !!
                    Spacer()
                }
                .navigationTitle("Test")
                .navigationBarItems(leading:
                    RectView(red: $red)       // << here !!
                )
            }
    
           }
        }
    
    
    struct RectView: View {
        @Binding var red: Bool
    
        var body: some View {
            HStack {
                 Rectangle()
                      .fill(red ? Color.red : .blue)
                      .onTapGesture {
                        withAnimation(Animation.easeIn(duration: 1), {
                            red.toggle()
                            })
                      }
            }
        }
    }
    

    【讨论】:

    • 谢谢!这实际上解决了其测试环境中的问题。在实际环境中,我有一个状态变量触发绑定变量的动画 onChange。由于某种原因,这仍然不起作用。 .onChange(of: changeColor) { _ in red.toggle() }
    猜你喜欢
    • 2012-08-29
    • 2019-11-17
    • 2020-01-30
    • 1970-01-01
    • 1970-01-01
    • 2020-08-22
    • 2019-03-05
    • 2014-11-16
    • 2012-01-10
    相关资源
    最近更新 更多