Navigation

如果您的应用最低部署目标是 iOS 16、iPadOS 16、macOS 13、tvOS 16、watchOS 9 或 visionOS 1 或更高版本，请使用 NavigationStack 和 NavigationSplitView 实例代替 NavigationView 。您如何使用这些内容取决于您是在一列中还是跨多个列进行导航。有了这些较新的容器，您可以更好地控制视图演示、容器配置和程序化导航。

设置标题

调用 navigationTitle(_:) 方法，将字符串设置为导航视图的标题。
调用 navigationBarTitleDisplayMode(_:) 方法为导航标题设置显示模式。该方法的参数类型为 NavigationBarItem.TitleDisplayMode 枚举。默认值为 large。
automatic: 应用上一个导航项目中的显示模式。
inline: 在导航栏中显示标题，不会随页面内容而变化。
large: 在导航栏中显示大标题，随页面内容滚动而变化。

 1if #available(iOS 16.0, *) {
 2    NavigationStack {
 3        ContentView()
 4            .navigationTitle("标题")
 5            .navigationBarTitleDisplayMode(.inline)
 6    }
 7} else {
 8    NavigationView {
 9        ContentView()
10            .navigationTitle("标题")
11            .navigationBarTitleDisplayMode(.inline)
12    }
13}

隐藏与显示

NavigationView 调用 navigationBarHidden(_:) 方法设置导航栏的显示或隐藏，默认为显示。
NavigationStack 调用 toolbar(.hidden, for:) 方法设置导航栏的显示或隐藏，默认为显示。

 1if #available(iOS 16.0, *){
 2    NavigationStack {
 3        ContentView()
 4            .toolbar(.hidden, for: .navigationBar)
 5    }
 6} else {
 7    NavigationView {
 8        ContentView()
 9            .navigationBarHidden(true)
10    }
11}

导航栏按钮

调用 toolbar(content:) 方法添加导航栏按钮。该方法的参数类型为 ToolbarContent 闭包，您可以在其中添加 ToolbarItem 或 ToolbarItemGroup。

 1NavigationView {
 2    ContentView()
 3        .toolbar {
 4            /// 左侧按钮
 5            ToolbarItem(placement: .topBarLeading) {
 6                Button("编辑") {
 7                    
 8                }
 9            }
10
11            /// 右侧按钮
12            ToolbarItemGroup(placement: .topBarTrailing) {
13                /// 导航跳转
14                NavigationLink {
15                    ContentView()
16                } label: {
17                    Image(systemName: "plus")
18                }
19                /// 普通按钮
20                Button {
21                    
22                } label: {
23                    Image(systemName: "ellipsis")
24                }
25            }
26        }
27}

返回按钮

调用 navigationBarBackButtonHidden(_:) 方法设置导航栏返回按钮的显示或隐藏，默认为显示。

1struct ContentView: View {
2    var body: some View {
3        DetailView()
4            .navigationBarBackButtonHidden(true) // 隐藏返回按钮
5    }
6}

导航控制

使用 NavigationLink 视图来导航至下一个页面，当用户点击该视图时触发页面跳转。

1struct ContentView: View {
2    var body: some View {
3        NavigationLink {
4            DetailView()
5        } label: {
6            Image(systemName: "plus")
7        }
8    }
9}