使用 NavigationView 创建导航

在 SwiftUI 中，NavigationView 是构建层次化界面的重要组件，允许你在不同视图之间进行导航。通过 NavigationLink，你可以创建可点击的链接，从而在不同的视图之间进行切换。以下是如何使用 NavigationView 创建导航的详细指南。

1. 创建基本的 NavigationView

1.1 使用 NavigationView

NavigationView 可以将视图包装在导航结构中。可以将 NavigationLink 作为 NavigationView 的子视图，以实现视图之间的导航。

示例：基本导航

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View") // 点击后导航到详情视图
                        .font(.title)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("Home") // 设置导航栏标题
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View") // 详情视图内容
            .font(.largeTitle)
            .navigationTitle("Detail") // 设置详情视图标题
            .navigationBarTitleDisplayMode(.inline) // 设置标题显示模式
    }
}

2. 创建多层次的导航

2.1 嵌套 NavigationLink

你可以在不同的视图中继续使用 NavigationLink 进行进一步的导航。

示例：多层次导航

struct CategoryView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: ItemView(itemName: "Item 1")) {
                    Text("Item 1")
                }
                NavigationLink(destination: ItemView(itemName: "Item 2")) {
                    Text("Item 2")
                }
            }
            .navigationTitle("Categories") // 设置分类视图标题
        }
    }
}

struct ItemView: View {
    var itemName: String

    var body: some View {
        Text("Selected: \(itemName)") // 显示选中的项目
            .font(.largeTitle)
            .navigationTitle(itemName) // 设置项目视图标题
    }
}

3. 自定义导航栏

3.1 自定义按钮和样式

你可以通过 navigationBarItems 来添加自定义的按钮或视图到导航栏。

示例：自定义导航按钮

struct CustomNavBarView: View {
    var body: some View {
        NavigationView {
            Text("Main View")
                .navigationTitle("Custom Navigation")
                .navigationBarItems(trailing: Button(action: {
                    print("Settings tapped") // 自定义按钮动作
                }) {
                    Image(systemName: "gear")
                })
        }
    }
}

4. 返回到上一个视图

在 SwiftUI 中，用户可以通过导航栏的返回按钮轻松返回到上一个视图，系统会自动处理导航栈。

5. 总结

  • NavigationView：用于创建一个包含多个视图的导航结构。
  • NavigationLink：用于实现视图之间的导航。
  • 自定义导航栏：可以通过 navigationBarItems 自定义导航栏的内容和行为。

通过合理使用 NavigationView 和 NavigationLink，你可以构建出层次化且易于导航的 SwiftUI 应用界面。

Last Updated::