SwiftUI导航NavigationStack

NavigationStack 是 SwiftUI 在 iOS 16/macOS 13 引入的新一代导航容器，算是对老的 NavigationView的替代品。它背后的设计哲学和用法变化挺大，尤其是更接近 UIKit 里的 UINavigationController 或 AppKit 的导航逻辑。

基本作用

它的核心作用和 NavigationView 类似：在多个视图之间建立层级式（栈式）的导航关系。但它提供了更强的控制能力，可以直接操作导航栈（stack）的内容，而不仅仅是 “点一个 link → push 一个页面”。

基本用法

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("去详情页 1") {
                    DetailView(text: "这是详情页 1")
                }
                
                NavigationLink("去详情页 2") {
                    DetailView(text: "这是详情页 2")
                }
            }
            .navigationTitle("首页")
        }
    }
}

struct DetailView: View {
    let text: String
    
    var body: some View {
        Text(text)
            .navigationTitle("详情")
            .navigationBarTitleDisplayMode(.inline)
    }
}

NavigationStack 是最外层容器。

NavigationLink 用来跳转到下一个视图。

.navigationTitle() 设置导航栏标题。

.navigationBarTitleDisplayMode(.inline) 可以控制标题样式（大标题 / 小标题）。

核心特点

1、显式栈管理

以前 NavigationView 下只能用 NavigationLink 隐式 push/pop。

NavigationStack 提供了一个 path 属性（通常绑定到一个 @State 数组），你可以直接操作这个数组，控制导航栈里的所有页面。

@State private var path: [String] = []

var body: some View {
    NavigationStack(path: $path) {
        List {
            Button("跳到详情 A") {
                path.append("A")
            }
            Button("跳到详情 B") {
                path.append("B")
            }
        }
        .navigationDestination(for: String.self) { value in
            Text("这是详情页 \(value)")
        }
    }
}

在这里，path 就是栈，你追加元素就是 push，移除就是 pop。

2、navigationDestination 的解耦

不需要像 NavigationLink 那样直接在写按钮时就塞入目标视图。

可以统一声明：对于某种类型的数据（比如 String、User、Article），跳转到哪个视图。

这样做更符合数据驱动的思维，也让代码更清晰。

3、更灵活的深层导航

可以一次性把 path 设置为 [“A”, “B”, “C”]，直接跳转到三级页面，适合深层连接。

这在旧的 NavigationView 里几乎是不可能的。

4、和老的 NavigationView 区别

NavigationView 更像是“外壳 + 隐式 push/pop”，很多状态不透明（比如很难恢复栈状态）。

NavigationStack 更像“栈的真实数据模型”，你可以完全掌控和恢复。

Apple 也明确表示：新项目尽量用 NavigationStack，旧项目慢慢迁移。

使用 path 手动控制导航栈

除了用 NavigationLink 自动跳转，还可以自己控制导航栈。

struct ContentView: View {
    @State private var path: [String] = []

    var body: some View {
        NavigationStack(path: $path) {
            List {
                Button("跳到详情 A") {
                    path.append("A")
                }
                Button("跳到详情 B") {
                    path.append("B")
                }
            }
            .navigationTitle("首页")
            .navigationDestination(for: String.self) { value in
                DetailView(text: "详情 \(value)")
            }
        }
    }
}

struct DetailView: View {
    let text: String
    
    var body: some View {
        Text(text)
            .navigationTitle(text)
    }
}

@State private var path: [String] 表示当前的导航路径。

.navigationDestination(for:) 告诉 NavigationStack 当遇到某种类型时应该跳转到哪个视图。

手动 path.append(…) 可以模拟 push，path.removeLast() 可以模拟 pop。