SwiftUI NavigatorStack 导航容器

NavigationStack 是一个用状态驱动、类型安全的声明式导航容器，它通过管理视图堆栈和导航路径来实现 SwiftUI 应用中的页面导航（专注于单栏场景）
NavigationStack 需要 iOS 16.0+以上版本支持。
核心要素

1. NavigationStack (导航容器)
2.     │
3.     ├── 管理 NavigationPath (状态存储)
4.     │
5.     ├── 包含 navigationDestination (路由配置)
6.     │       │
7.     │       └── 判断数据类型 → 映射对应的视图
8.     │
9.     └── 视图层（导航的起点）

复制代码

NavigationPath 是导航路径容器，用于管理 NavigationStack 的导航状态和历史记录

navigationDestination  是视图修饰符，用于定义数据类型到目标视图的映射关系，相当于导航系统的路由表

基本用法

1、简单页面跳转

可NavigationStack配合NavigationLink实现（不需要使用NavigationPath记录、管理路径）

1. struct ContentView: View {
2.     var body: some View {
3.         NavigationStack {
4.             List {
5.                 NavigationLink("前往详情页", value: "详情内容")
6.                 NavigationLink("设置", value: "设置页面")
7.             }
8.             .navigationDestination(for: String.self) { value in
9.                 DetailView(content: value)
10.             }
11.         }
12.     }
13. }
15. struct DetailView: View {
16.     let content: String
17.     var body: some View {
18.         Text("详情: \(content)")
19.             .navigationTitle("详情页")
20.     }
21. }

复制代码

2、简单页面跳转：多类型路由映射

很多时候，navigationDestination映射的value类型并非只有一种：

1. struct Test: View {
2.     var body: some View {
3.         NavigationStack {
4.             List {
5.                 // 使用 value 参数 - 必须遵循 Hashable（swift值类型数据默认遵循Hashable协议）
6.                 NavigationLink("使用 value", value: "字符串值")
7.                 NavigationLink("使用数字", value: 42)
8.             }
9.             .navigationDestination(for: String.self) { value in
10.                 Text("字符串值: \(value)")
11.             }
12.             .navigationDestination(for: Int.self) { value in
13.                 Text("整数值: \(value)")
14.             }
15.         }
16.     }
17. }

复制代码

3、简单页面跳转：多类型路由映射2

也可使用枚举管理多种数据类型：

1. //注意value类型，需要遵循Hashable
2. enum Route: Hashable {
3.     case product(Int)
4.     case profile(String)
5.     case settings
6. }
8. struct MultiTypeNavigationView: View {
9.     var body: some View {
10.         NavigationStack {
11.             VStack(spacing: 20) {
12.                 NavigationLink("产品详情", value: Route.product(123))
13.                 NavigationLink("用户资料", value: Route.profile("张三"))
14.                 NavigationLink("设置", value: Route.settings)
15.             }
16.             .navigationDestination(for: Route.self) { route in
17.                 switch route {
18.                 case .product(let id):
19.                     ProductDetailView(productId: id)
20.                 case .profile(let username):
21.                     ProfileView(username: username)
22.                 case .settings:
23.                     SettingsView()
24.                 }
25.             }
26.         }
27.     }
28. }

复制代码

4、多层页面跳转

可使用NavigationStack、NavigationPath实现
NavigationPath提供了以下方法用于管理路径：

append() : 跳转到新页面

removeLast(): 返回上一页

removeLast(n): 返回前n页

removeAll(): 返回首页

count: 显示当前导航深度

Codable: 实现状态持久化和深度链接

1. import SwiftUI
3. // 定义路由枚举
4. enum Route: Hashable {
5.     case detail(String)
6.     case settings
7.     case profile(Int)
8. }
10. struct ContentView: View {
11.     @State private var path = NavigationPath()
12.    
13.     var body: some View {
14.         NavigationStack(path: $path) {
15.             List {
16.                 Button("跳转到详情页") {
17.                     path.append(Route.detail("Hello World"))
18.                 }
19.                
20.                 Button("跳转到设置") {
21.                     path.append(Route.settings)
22.                 }
23.                
24.                 Button("跳转到用户资料") {
25.                     path.append(Route.profile(123))
26.                 }
27.                
28.                 Button("多层级跳转") {
29.                     path.append(Route.detail("第一层"))
30.                     path.append(Route.settings)
31.                     path.append(Route.profile(456))
32.                 }
33.             }
34.             .navigationTitle("首页")
35.             .navigationDestination(for: Route.self) { route in
36.                 switch route {
37.                 case .detail(let text):
38.                     DetailView(text: text, path: $path)
39.                 case .settings:
40.                     SettingsView(path: $path)
41.                 case .profile(let userId):
42.                     ProfileView(userId: userId, path: $path)
43.                 }
44.             }
45.         }
46.     }
47. }
49. struct DetailView: View {
50.     let text: String
51.     @Binding var path: NavigationPath
52.    
53.     var body: some View {
54.         VStack {
55.             Text("详情页: \(text)")
56.                 .font(.title)
57.             
58.             Button("前往下一层") {
59.                 path.append(Route.detail("从详情页跳转"))
60.             }
61.             
62.             Button("返回首页") {
63.                 path.removeLast(path.count)
64.             }
65.             
66.             Button("返回上一层") {
67.                 path.removeLast()
68.             }
69.         }
70.     }
71. }
73. struct SettingsView: View {
74.     @Binding var path: NavigationPath
75.    
76.     var body: some View {
77.         VStack {
78.             Text("设置页面")
79.                 .font(.title)
80.             
81.             Button("返回") {
82.                 path.removeLast()
83.             }
84.         }
85.     }
86. }
88. struct ProfileView: View {
89.     let userId: Int
90.     @Binding var path: NavigationPath
91.    
92.     var body: some View {
93.         VStack {
94.             Text("用户资料: \(userId)")
95.                 .font(.title)
96.             
97.             Button("跳转到详情") {
98.                 path.append(Route.detail("来自用户资料"))
99.             }
100.         }
101.     }
102. }

复制代码

5、Hashable 的作用

导航必需：NavigationLink 的 value 参数必须遵循 Hashable

路径管理：NavigationPath 依赖 Hashable 来跟踪导航状态

唯一性判断：用于比较两个实例是否代表相同的导航目标

5.1、NavigationLink 的 Hashable 要求

1. struct NavigationLinkRequirement: View {
2.     var body: some View {
3.         NavigationStack {
4.             List {
5.                 // ✅ 形式1：使用 value 参数 - 必须遵循 Hashable
6.                 NavigationLink("使用 value", value: "字符串值")
7.                 NavigationLink("使用数字", value: 42)
8.                
9.                 // ❌ 这会导致编译错误，因为 MyData 不遵循 Hashable
10.                 // NavigationLink("无效", value: MyData())
11.                
12.                 // ✅ 形式2：使用 destination 参数 - 不需要 Hashable
13.                 NavigationLink("使用 destination") {
14.                     MyCustomView()
15.                 }
16.                
17.                 // ✅ 传统形式 - 不需要 Hashable
18.                 NavigationLink("传统形式", destination: Text("目标视图"))
19.             }
20.             .navigationDestination(for: String.self) { value in
21.                 Text("字符串值: \(value)")
22.             }
23.             .navigationDestination(for: Int.self) { value in
24.                 Text("整数值: \(value)")
25.             }
26.         }
27.     }
28. }
30. // ❌ 不遵循 Hashable 的类型
31. struct MyData {
32.     let content: String
33. }
35. struct MyCustomView: View {
36.     var body: some View {
37.         Text("自定义视图")
38.     }
39. }

复制代码

5.2、NavigationPath 的 Hashable 要求

1. struct NavigationPathExample: View {
2.     @State private var path = NavigationPath()
3.    
4.     var body: some View {
5.         NavigationStack(path: $path) {
6.             VStack(spacing: 20) {
7.                 Text("NavigationPath 演示")
8.                     .font(.title)
9.                
10.                 Button("添加字符串") {
11.                     // ✅ 字符串遵循 Hashable
12.                     path.append("新页面")
13.                 }
14.                
15.                 Button("添加整数") {
16.                     // ✅ 整数遵循 Hashable
17.                     path.append(100)
18.                 }
19.                
20.                 Button("添加自定义类型") {
21.                     // ✅ 只要遵循 Hashable 就可以
22.                     path.append(MyHashableData(name: "测试", id: 1))
23.                 }
24.                
25.                 // ❌ 这会导致运行时错误
26.                 Button("添加非 Hashable 类型（会崩溃）") {
27.                     // path.append(MyData()) // 取消注释会崩溃
28.                 }
29.                
30.                 Button("查看路径深度: \(path.count)") {
31.                     print("当前路径深度: \(path.count)")
32.                 }
33.                
34.                 Button("返回") {
35.                     if !path.isEmpty {
36.                         path.removeLast()
37.                     }
38.                 }
39.                
40.                 Button("返回根视图") {
41.                     path = NavigationPath() // 重置路径
42.                 }
43.             }
44.             .navigationDestination(for: String.self) { value in
45.                 Text("字符串页面: \(value)")
46.             }
47.             .navigationDestination(for: Int.self) { value in
48.                 Text("整数页面: \(value)")
49.             }
50.             .navigationDestination(for: MyHashableData.self) { data in
51.                 Text("自定义数据: \(data.name) - \(data.id)")
52.             }
53.         }
54.     }
55. }
57. // ✅ 遵循 Hashable 的自定义类型
58. struct MyHashableData: Hashable {
59.     let name: String
60.     let id: Int
61. }

复制代码

6、导航栏UI自定义

NavigationStack 导航结构图：
[code]NavigationStack (容器层)    │    ├──
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！