你应该知道的!关于SwiftUI中导航栏的4点知识

得益于SwiftUI的声明式编程方式进行页面切换是非常方便的,这篇文章将对SwiftUI中的导航功能进行一个全面的了解,主要会涉及到这几个方面:

  1. NavigatinView的使用方法以及对应API的讲解
  2. NavigationLink的使用方法
  3. 实现POP会上一级页面的效果
  4. Xcode12的实时预览导航栏

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。

NavigationView

1
2
3
NavigationView {
Text("Hellow World")
}

如上所示,将一个View包裹在NavigationView中,当前这个body就是一个“导航控制器”了,关于这种写法的说明可以查看我之前的学习SwiftUI,必须掌握的3个知识点中的View部分。

1
2
3
4
NavigationView {
Text("Hellow World")
.navigationTitle("公众号:iOS开发栈") // 或者使用 navigationBarTitle
}

通过给NavagationView内部的Content设置navigationTitle修改器可以设置导航栏的标题。

1
.navigationBarTitleDisplayMode(.inline)

通过设置navigationBarTitleDisplayMode修改器可以更改导航栏标题的展现样式,inline是居中展示并且导航栏高度是固定的44pt;large是在iOS前几个版本新引入的样式,这种样式默认是把标题显示在左上角并且字体加粗加大,随着屏幕的滚动导航栏的高度也会变化;automic是会和导航栈的上一个页面保持相同。

1
.navigationBarTitle("公众号:iOS开发栈", displayMode: .inline)

通过设置navigationBarTitle修改器可以将上面两个修改器合并成一个。

1
.navigationBarHidden()

通过使用navigationBarHidden可以动态控制是否展示导航栏,结合@State的使用可以实现动态显示或者隐藏导航栏的效果了。

1
.navigationBarItems(leading:, trailing:)

使用navigationBarItems可以给导航栏的左、右添加按钮,而且因为leading和trailing的类型都是View的,所以你可以很方便的添加文字、图片、图文等。

NavigationLink

上面创建出了一个navigationView了,下面来看一下怎么实现跳转。

1
2
3
4
5
NavigationLink("界面跳转", destination: Text("公众号:iOS开发栈"))

NavigationLink(destination: Text("公众号:iOS开发栈"), label: {
Text("界面跳转")
})

这两种创建方式的效果是一样的,最终都是通过点击“界面跳转”的文字以后跳转到一个只有“公众号:iOS开发栈”的新页面。

实现POP回上一级页面的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ContentView.swift
struct ContentView: View {
@State var pushActive = false
var body: some View {
NavigationView {
VStack {
NavigationLink("跳转并返回", destination: SecondView(pushActive: $pushActive), isActive: $pushActive)
}
.navigationTitle("公众号:iOS开发栈")
}
}
}

// SecondView.swift
struct SecondView: View {
@Binding var pushActive: Bool
var body: some View {
Button("返回") {
pushActive = false
}
}
}

使用一个@State属性绑定到NavigationLink的初始化方法中的isActive参数,这样就会根据pushActive的Bool值来push和pop视图,如果默认设置成true那启动app后就会直接切换到SecondView。

把pushActive参数传递到SecondView以后通过在SecondView中修改这个参数的值,就可以实现返回上一级的效果。其中关于@State和@Bind的用法可以看一下详解SwiftUI数据流是怎么在View间传递的

Xcode12的实时预览导航栏

在Xcode12中,对于SwiftUI的文件,我们可以通过打开Cavas(option+cmd+enter)来查看实时预览的界面,这是一个非常好用的功能。虽然有很多的局限性,不够也终于让iOS开发者品尝到了Web或者Android待遇了。感谢苹果爸爸🙏

1
2
3
4
5
struct SecondView_Previews: PreviewProvider {
static var previews: some View {
SecondView(pushActive: .constant(false))
}
}

创建SwiftUI的文件后默认会带有一个遵守了PreviewProvider协议并且以_Previews结尾的结构体,有了它就有了对界面的实时预览能力。

要想预览导航栏的push和pop效果需要在这个结构体中进行修改。

1
2
3
4
5
6
7
8
struct SecondView_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
SecondView(pushActive: .constant(false))
.navigationTitle("公众号:iOS开发栈")
}
}
}

通过在预览结构体中增加一个NavigationView就可以在导航栈的次级页面实时预览带有导航条的效果。

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。

总结

这篇文章涵盖了NavigationView和NavigationLink的基础用法和常用API的讲解,又提到了在实战应用中会遇到了一些进阶需求以及提升开发效率的预览功能用法。

🎉 你已经掌握了SwiftUI框架中关于导航栏的知识,现在可以动手试试做一个带有导航控制的应用了。