如何创建自定义导航栏Swift UI?

时间:2020-05-28 10:59:44

标签: swiftui

我一直在使用默认的navigation bar(因为它具有启用滑动以关闭视图的功能),但是由于我的问题是{{1}中的hide NavBar }}和RootView在导航到show后消失时,我的ChildView遇到了问题(在使用导航栏操作后它会上下反弹)。因此,我需要一个ChildView(完全可以通过滑动来隐藏它。)

在这里您可以看到我的代码和the Tutorial已解决并触发了您正在阅读的代码。

我的RootView

custom NavBar

ChildView#

struct ExploreView: View {

    var body: some View {
        ZStack{
        VStack{
            HStack{
        
                NavigationLink(destination: MessagesView()){

                         Image("messages")
                        
                      }
 
                }
            }

        }
       
        }.navigationBarTitle(Text(""), displayMode: .inline)
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
   
    }
}

1 个答案:

答案 0 :(得分:1)

自定义的NavigationBar可能看起来像这样。当然,您可以按照自己喜欢的方式使用颜色和fontSizes等对其进行个性化设置:

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    NavigationLink(destination: MessagesView()){
                        Text("Go to MessagesView")
                    }
                }
            }.navigationBarTitle(Text(""), displayMode: .inline)
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)
        }
    }
}

struct MessagesView: View {

    @Environment(\.presentationMode) var presentationMode

    var btnBack : some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            Image(systemName: "chevron.left")
                .font(.title)
        }
    }

    var body: some View {

        ZStack{
            VStack{
                HStack {
                    btnBack
                        .padding(.leading, 10)
                    Spacer()
                }
                Spacer()

                Text("MessagesView")
                Spacer()
            }.navigationBarTitle(Text(""), displayMode: .inline)
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)
        }
    }
}

要在禁用标准NavigationBar的情况下仍保持向后滑动手势,您需要在SceneDelegate下添加一些内容:

extension UINavigationController: UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}