SwiftUI 导航控件 - NavigationStack

在 SwiftUI 中，NavigationStack 是 iOS 16 及以上版本的推荐导航容器，它支持更灵活的路径管理和深层导航功能，可以用来替代早期的 NavigationView(已被废弃)。

基本使用

NavigationStack 是一个容器，包裹在需要导航的视图外部，可以使用 NavigationLink 在视图之间导航。示例代码如下：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Go to Detail View") {
                    DetailView()
                }

                NavigationLink("Go to Profile View") {
                    ProfileView()
                }
            }
            .navigationTitle("Home")
        }
    }
}


struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("This is the Profile View")
            .navigationTitle("Profile")
    }
}

上述代码使用 NavigationStack 创建了一个 Home 的导航栈，分别可以跳转由 NavigationLink 包裹的 DetailView 和 ProfileView。在子视图中可以使用 navigationTitle 来设置导航栏标题

动态导航路径

NavigationStack 支持基于路径的动态导航，可以用来实现更复杂的导航逻辑。代码示例如下：

struct ContentView: View {

    @State private var path: [String] = [] // 路径数组，用于动态导航
    var body: some View {
        NavigationStack(path: $path) {
            List {
                Button("Go to Page 1") {
                    path.append("Page1")
                }
                Button("Go to Page 2") {
                    path.append("Page2")
                }
                Button("Go to Page 3") {
                    path.append("Page3")
                }
            }
            .navigationTitle("Home")
            .navigationDestination(for: String.self) { page in
                Text("This is \(page)")
                    .navigationTitle(page)
            }
        }
    }
}

我们通过 path 数组管理当前导航栈。然后用 navigationDestination(for:) 定义路径中每个值对应的目标视图。

带参数的导航

你也可以使用 NavigationLink 传递参数给目标视图。示例代码如下：

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    var body: some View {
        NavigationStack {
            List(items, id: \.self) { item in
                NavigationLink(item) {
                    DetailView(item: item)
                }
            }
            .navigationTitle("Items")
        }
    }
}

struct DetailView: View {
    let item: String
    var body: some View {
        Text("Selected: \(item)")
            .navigationTitle(item)
    }
}

我们通过 NavigationLink 通过闭包将参数传递给目标视图。然后目标视图使用传递的参数完成自定义展示。