SwiftUI -两个导航栏

基础概念

SwiftUI 是苹果公司推出的一个声明式 UI 框架，用于构建 macOS、iOS、watchOS 和 tvOS 应用程序。它允许开发者通过简洁的声明式语法来描述用户界面，而不是传统的命令式编程方式。

在 SwiftUI 中，NavigationView 是一个容器视图，用于管理导航堆栈，允许用户在不同的视图之间进行导航。每个 NavigationView 都有一个导航栏（Navigation Bar），显示当前视图的标题，并提供返回按钮以导航回上一个视图。

类型

在 SwiftUI 中，NavigationView 主要有以下几种类型：

根导航视图：作为应用程序的入口点，包含整个导航堆栈。
嵌套导航视图：在已有的导航视图中嵌套另一个 NavigationView，用于实现更复杂的导航结构。

应用场景

NavigationView 常用于需要多级导航的应用程序，例如：

文件浏览器：显示文件夹和文件的层次结构。
设置页面：包含多个子设置页面。
应用程序的主菜单：包含多个主要功能模块。

遇到的问题及解决方法

问题：在 SwiftUI 中如何实现两个导航栏？

在 SwiftUI 中，默认情况下，一个 NavigationView 只有一个导航栏。如果需要在同一个视图中显示两个导航栏，可以通过以下方法实现：

使用 ZStack 布局：将两个 NavigationView 放在 ZStack 中，并通过调整它们的位置来模拟两个导航栏的效果。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            NavigationView {
                VStack {
                    Text("Main Content")
                        .padding()
                    NavigationLink(destination: SecondView()) {
                        Text("Go to Second View")
                    }
                }
                .navigationBarTitle("Main View")
            }
            
            NavigationView {
                Text("Secondary Navigation Bar")
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                .background(Color.gray.opacity(0.2))
                .edgesIgnoringSafeArea(.top)
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Second View")
            .navigationBarTitle("Second View")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

自定义导航栏：通过自定义视图来模拟第二个导航栏的效果。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Main Content")
                    .padding()
                NavigationLink(destination: SecondView()) {
                    Text("Go to Second View")
                }
            }
            .navigationBarTitle("Main View")
            .background(NavigationConfigurator { nc in
                nc.navigationBar.items(inserting: CustomNavigationBarItem()) { }
            })
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Second View")
            .navigationBarTitle("Second View")
    }
}

struct CustomNavigationBarItem: ToolbarItem {
    var body: some ToolbarItemContent {
        ToolbarItem(placement: .navigationBarTrailing) {
            Text("Secondary Nav")
                .foregroundColor(.white)
                .padding(.horizontal, 10)
                .background(Color.blue)
                .cornerRadius(5)
        }
    }
}

struct NavigationConfigurator: UIViewControllerRepresentable {
    var configure: (UINavigationController) -> Void = { _ in }

    func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfigurator>) -> UIViewController {
        UIViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
        if let nc = uiViewController.navigationController {
            self.configure(nc)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}