如何在SwiftUI中为navigationBarHidden设置动画？

问题描述

struct ContentView: View {
    @State var hideNavigationBar: Bool = false
    
    var body: some View {
        NavigationView {
            ScrollView {
                vstack {
                    Rectangle().fill(Color.red).frame(height: 50)
                        .onTapGesture(count: 1,perform: {
                            withAnimation {
                                self.hideNavigationBar.toggle()
                            }
                        })
                    vstack {
                        ForEach(1..<50) { index in
                            HStack {
                                Text("Sample Text")
                                Spacer()
                            }
                        }
                    }
                }
            }
            .navigationBarTitle("browse")
            .navigationBarHidden(hideNavigationBar)
        }
    }
}

当您点击红色矩形时，它会将导航栏移开。我以为withAnimation{}可以解决此问题，但不能解决。在UIKit中，您将执行以下操作navigationController?.setNavigationBarHidden(true,animated: true)。

在xCode 12 beta 6和xCode 11.7中进行了测试

解决方法

您可以尝试使用

.navigationBarHidden(hideNavigationBar).animation(.linear(duration: 0.5))而不是.navigationBarHidden(hideNavigationBar)

，还将self.hideNavigationBar.toggle()从动画块中移出。如果您使用上述方法隐藏带有动画的导航栏，则不需要这样做。

,

我仍在SwiftUI中学习动画，但是在这一阶段，我了解到必须为父视图设置动画。

所以您的代码将变成...

struct ContentView: View {

    @State var hideNavigationBar: Bool = false
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Rectangle().fill(Color.red).frame(height: 50)
                        .onTapGesture(count: 1) {
                            self.hideNavigationBar.toggle()
                        }
                    VStack {
                        ForEach(1..<50) { index in
                            HStack {
                                Text("Sample Text")
                                Spacer()
                            }
                        }
                    }
                }
            }
            .navigationBarTitle("Browse")
            .navigationBarHidden(hideNavigationBar)
            .animation(.spring()) // for example
        }
    }
}

请注意，任何函数调用中的最后一个参数都可以放在单个闭包中。

所以...

                    .onTapGesture(count: 1,perform: {
                        self.hideNavigationBar.toggle()
                    })

可以成为...

                    .onTapGesture(count: 1) {
                        self.hideNavigationBar.toggle()
                    }

我的拙见使语法更简单。

,

我认为，唯一的解决方案是在 SwiftUI 2 中使用位置函数

var body: some View {
    GeometryReader { geometry in
        NavigationView {
            ZStack {
                Color("background")
                    .ignoresSafeArea()
                
                // ContentView
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarItems(leading: logo,trailing: barButtonItems)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    SearchBarButton(placeholder: LocalizedStringKey("home_vc.search_bar.placeholder"))
                        .opacity(isNavigationBarHidden ? 0 : 1)
                        .animation(.easeInOut(duration: data.duration))
                }
                
            }
        }
        .frame(height: geometry.size.height + (isNavigationBarHidden ? 70 : 0))
         // This is the key ⬇
        .position(x: geometry.size.width/2,y: geometry.size.height/2 - (isNavigationBarHidden ? 35 : 0))
        .animation(.easeInOut(duration: 0.38))
        .onTapGesture {
            isNavigationBarHidden.toggle()
        }
    }
}