SwiftUI控件之 NavigationStack

发表于 更新于 分类于 阅读次数：

在 SwiftUI 中，NavigationStack 用来作为一个根视图（root view）使得我们能够将一个新的视图展示在这个根视图上。

创建一个带导航栏和标题的app

1
2
3
4
5
6
7
8
9
10
11
12
struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<10,id: \.self) { index in
                    Text("当前行\(index)")
                }
            }
            .navigationTitle("导航栏标题")
        }
    }
}

在上面的代码中，

  1. 将一个NavigationStack 作为整个页面的根视图；
  2. 给 NavigationStack 的第一个子视图List添加navigationTitle修饰器，注意，这个修饰器的作为就是给导航栏添加标题。
  3. 使用ForEach创建List的显示内容。

此时，效果如下：

导航栏风格

在默认情况下，iOS 中的导航栏为大标题的样式。可以通过navigationBarTitleDisplayMode修改标题的样式：

  • inline：小标题样式，之前 UIKit中常用的样式；
  • larget：大标题样式，SwiftUI app 中的默认样式。

不过，即使在大标题的样式下，当我们向下滑动时，当标题样式也会变为小标题样式，向上滑动到顶部时又会重新变为原来的样式。

文章开头我们说过，使用NavigationStack作为根视图来实现页面的展示。要想实现其他视图的展示或者常见的导航栏页面跳转需要和NavigationLink一起使用。

1
2
3
4
5
6
NavigationLink {
    // 要展示的视图
    Text("当前页面\(index)")
} label: {
    Text("当前行\(index)")
}

这里，我们使用的是 NavigationLink(destination: () -> View, label: () -> View)函数，destination参数表示的展示的视图，label表示通过那个视图来触发展示的内容，即被点击的视图。

当我们添加了NavigationLink之后，List中的每一行视图都会变成可点击的样式，然后我们点击任意一行之后都将跳转或者展示对应的页面。具体效果如下：

在上面的演示效果中，我们会发现，当我们进入展示的目标视图页面，目标视图页面本身也会带上导航栏并且自带返回功能。

注意，在一些旧版本的 SwiftUI 代码中，使用的是NavigationView实现相同的功能，目前NavigationView已被逐步放弃，官方更推荐我们使用NavigationLink。