使用NavigationStack进行导航

NavigationStack 是 SwiftUI 中用于管理导航流程的强大工具。它允许你以结构化的方式在不同的视图之间进行切换，从而构建流畅且用户友好的应用程序。准备好深入了解了吗？让我们开始吧！

NavigationStack 的基本用法

使用 NavigationStack 非常简单。你只需要将你的视图包裹在 NavigationStack 中即可。例如：

NavigationStack {
    Text("首页")
        .navigationTitle("我的应用")
}

这段代码创建了一个包含文本 "首页" 的 NavigationStack，并在导航栏中显示标题 "我的应用"。是不是很简单？🎉

使用 push 进行页面跳转

NavigationStack 的核心功能之一是使用 NavigationLink 进行页面跳转。NavigationLink 允许你点击一个视图，然后导航到另一个视图。

NavigationStack {
    NavigationLink("前往详情页") {
        Text("详情页")
            .navigationTitle("详情")
    }
    .navigationTitle("首页")
}

在这个例子中，点击 "前往详情页" 文本将导航到显示 "详情页" 的视图。navigationTitle 用于设置每个页面的标题。

使用 @State 管理导航状态

更高级的用法是使用 @State 变量来控制导航状态。这允许你以编程方式触发导航，而不仅仅是通过点击 NavigationLink。

struct ContentView: View {
    @State private var isDetailViewActive = false

    var body: some View {
        NavigationStack {
            VStack {
                Button("显示详情页") {
                    isDetailViewActive = true
                }
                .navigationDestination(isPresented: $isDetailViewActive) {
                    Text("详情页")
                        .navigationTitle("详情")
                }
                .navigationTitle("首页")
            }
        }
    }
}

在这个例子中，点击 "显示详情页" 按钮会将 isDetailViewActive 设置为 true，从而触发导航到详情页。这种方法提供了更大的灵活性，允许你根据应用程序的逻辑来控制导航。

NavigationPath 的高级用法

NavigationPath 提供了更高级的导航管理功能。你可以使用 NavigationPath 来跟踪导航历史，并在需要时返回到之前的页面。

1. 创建 NavigationPath: 首先，创建一个 NavigationPath 实例。
2. 使用 push 方法: 使用 push 方法将新的视图添加到导航堆栈中。
3. 使用 pop 方法: 使用 pop 方法返回到之前的视图。

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Button("前往页面 2") {
                    path.append("页面2")
                }
                .navigationDestination(for: String.self) { page in
                    if page == "页面2" {
                        Text("页面 2")
                            .navigationTitle("页面 2")
                    }
                }
                .navigationTitle("首页")
            }
        }
    }
}

通过 NavigationPath，你可以更精细地控制导航流程，实现更复杂的导航模式。希望这些例子能帮助你更好地理解和使用 NavigationStack！继续探索，你会发现更多令人兴奋的功能！🚀