SwiftUI之NavigationView的基础使用与进阶实践

一、前言

在 UIKit 的框架中，我们时常使用 UINavigationViewController 来管理页面的 push 和 pop，这是页面管理的基本操作。而到了 SwiftUI，该操作是交由 NavigationView 和 NavigationLink 来完成。
本文先从 NavigationView 的基本应用开始，再补充如何灵活的使用 NavigationView 来完成很多更细节化的需求。

二、基本概念

如下所示，用一个 demo 展示了 NavigationView 和 NavigationLink 的基本应用：

// NavigationView基础
import SwiftUI@main
struct iOS_testApp: App {var body: some Scene {WindowGroup {NavigationView {NavigationLink(destination: Text("Destination"),label: {Text("Navigate")})}}}
}

在该示例中，提供了一个顶层 View，即 NavigationView，在 SwiftUI 中，NavigationView 相当于 UIKit 的 UINavigationViewController，它提供了整个页面导航环境的顶层容器，包裹在 NavigationView 下面的是 NavigationLink，它定义了本页面的视图以及待 push 的视图（通过点击）。
如在示例中，Text(“Navigate”) 就是本页面的视图，而 Text(“Destination”) 就是点击跳转后的视图。主界面如下所示，点击 Navigate 即可 push：

点击 Navigate 后 push 新界面 Destination：

三、设置标题栏

在 NavigationView 的默认展示设置中，根级界面是没有标题栏的，而待 push 的界面默认带标题返回栏，但是标题为空。通过 .navigationBarTitle 修饰属性可以对标题进行设置：

// NavigationView根界面带标题栏
import SwiftUI@main
struct iOS_testApp: App {var body: some Scene {WindowGroup {NavigationView {NavigationLink(destination: Text("Destination"),label: {Text("Navigate")}).navigationBarTitle("Main", displayMode: .large)}}}
}

带 large 标题栏的 Navigate 界面，如下所示：

其中 displayMode 是一个枚举类型参数，支持 inline，large 和 automatic，分别表示小标题栏，大标题栏和自动选择，如果你选择 automatic，则一般系统会选择 large。

四、隐藏标题栏

某些情况下，如果不希望使用标题栏，或者不喜欢 NavigationView 提供的标题栏样式，对它提供的定制灵活性并不满意，而希望完全由自己接管和实现标题栏，在这种情况下，可以选择隐藏标题栏，隐藏标题栏通过 .navigationBarHidden(true) 来完成：

// 隐藏destination标题栏
import SwiftUI@main
struct iOS_testApp: App {var body: some Scene {WindowGroup {NavigationView {NavigationLink(destination: Text("Destination")// 隐藏二级界面的标题栏.navigationBarHidden(true),label: {Text("Navigate")}).navigationBarTitle("Main", displayMode: .automatic)}}}
}

隐藏了标题栏的 Destination 界面，如下所示：

五、编程实现页面返回逻辑

当隐藏了二级界面的标题栏后，我们岂不是把标题栏的返回按钮也隐藏了，那么要实现自己的返回按钮时，该怎么做呢？这时候就需要用到 SwiftUI 独有的机制：视图环境 @Environment，Environment 提供了视图共享的属性绑定服务，通过这些属性可以完成视图的基本操作，其中一个属性叫 presentationMode，该属性绑定了导航页面间的上下文关系，通过它的 dismiss 方法可以手动返回页面：

// 通过编程实现页面返回逻辑
import SwiftUIstruct DestinationView: View {// 声明属性presentationMode@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>var body: some View {Text("Destination View").navigationBarHidden(true) // 追加后destination不再出现标题栏.onTapGesture {// 点击"Destination View"后返回self.presentationMode.wrappedValue.dismiss()}}
}struct ContentView: View {var body: some View {NavigationView {NavigationLink(destination: DestinationView(),label: {Text("Navigate View")})}}
}@main
struct iOS_testApp: App {var body: some Scene {WindowGroup {ContentView()}}
}

注意：该方法在 iOS 15.0 后即将被属性 dismiss 替代，但是考虑到撰写本文时主流系统是 iOS 14.5，出于兼容需要，依然使用 presentationMode 来完成代码。
在以上例子中，把 Text(“Destination”) 这个二级界面单独提取到 DestinationView 中, 也单独提出 ContentView。通过声明 @Environment(.presentationMode)，让 DestinationView 获取了 presentationMode 属性的绑定数据。
接下来给 Text(“Destination View”) 提供点击操作: onTapGesture，在点击的实现代码里调用 self.presentationMode.wrappedValue.dismiss() 。
运行程序，现在可以通过点击 Navigate View 和 Destination View 自由往返。

六、标题栏样式设置

现在知道 NavigationView 提供了导航的基本元素，并且提供了系统默认的标题栏，我们可以隐藏标题栏从而自行设计界面。那么当我们想用默认的标题栏，但是想要改变其中的某些样式，比如标题颜色，应该怎么做呢？
事实上，更改标题栏的样式在 SwiftUI 中属于全局配置，即配置一次后，对运行时间接下来的所有标题栏也生效，这个全局配置是通过 UINavigationBar.appearance() 来实现的。
修改 ContentView 如下：

// 设置标题栏标题为红色
struct ContentView: View {var body: some View {NavigationView {NavigationLink(destination: DestinationView(),label: {Text("Navigate View")}).navigationBarTitle("Title", displayMode: .inline).onAppear() {// 设置标题颜色UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]}}}
}

如下所示，Navigate View 标题栏的标题为红色，样式为 inline：

运行应用程序，可以发现 title 是红色的，与此同时，该设置对 DestinationView 也同样有效：

// 展示DestinationView标题，一样发现是红色
struct DestinationView: View {@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>var body: some View {Text("Destination View").navigationBarHidden(false) // 标题栏不隐藏.navigationTitle("Title 2") // 追加标题.onTapGesture {self.presentationMode.wrappedValue.dismiss()}}
}

Destination View 标题栏设置为红色：

七、进阶：去掉点击的交互特效

当运行示例程序时，很容易会发现点击 Navigate View 会出现一个明显的渐变特效，另一方面，也很容易发现 Navigate View 的字体颜色是经典的 iOS 7 蓝，这是默认的按钮效果，对于这种效果有些人觉得很好，但是对于开发者开发的应用，由于界面风格的不同，该特效并不是什么时候都是合适的。如果想移除这个效果，该怎么做？
Navigate View 被按下时的默认展示效果，如下：

这时候就要用到 buttonStyle 修饰器，在 SwiftUI 中，它的完整声明如下：

// buttonStyle的声明（不是我写的）
extension View {public func buttonStyle<S>(_ style: S) -> some View where S : ButtonStyle
}

通过该修饰器来完成 Button 样式的修改，而传入的参数 ButtonStyle 由自己定义。也就是说，在此之前需要定义一个 ButtonStyle 的 Struct，代码如下：

// 定义一个ButtonStyle，命名为DefaultButtonStyle
struct DefaultButtonStyle: ButtonStyle {func makeBody(configuration: Self.Configuration) -> some View {configuration.label.background(configuration.isPressed ? Color.clear : Color.clear)}
}

在本例中，把背景颜色全部改成了.clear，开发者可以根据自身需求修改。并且 configuration的isPressed 状态属性也很有用，可以根据状态改变按钮视觉。接下来在 ContentView 中设置 buttonStyle：

// 设置buttonStyle
struct ContentView: View {var body: some View {NavigationView {NavigationLink(destination: DestinationView(),label: {Text("Navigate View")}).navigationBarTitle("Title", displayMode: .inline)// 设置按钮样式.buttonStyle(DefaultButtonStyle()).onAppear() {UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]}}}
}

运行应用程序，就会发现按钮样式已经不再有原先的样式特效，消除了默认特效后的"Navigate View"如下所示：

八、进阶：支持默认点击之外的更多交互

到目前为止，NavigationView 和 NavigationLink 已经可以满足我们日常开发的大部分需求了。但是，在某些情况下，我们对产品的交互有更丰富的需求。例如，在本例中，NavigationLink 默认支持点击操作，但是如果我们想要更多的操作响应怎么办，比如长按响应？
开始进行尝试，先把 ContentView 进行简化，去掉原先追加的若干代码，然后加入 onLongPressGesture：

// 尝试加入onLongPressGesture
struct ContentView: View {var body: some View {NavigationView {NavigationLink(destination: DestinationView(),label: {Text("Navigate View").onLongPressGesture {print("long press")}})}}
}

运行代码，可以发现，当长按 Navigate View 时，确实打印出了"long press"，但是同时 NavigationLink 的点击响应也失效了，这明显不符合我们需求。原因在于支持了 onLongPressGesture，NavigationLink 的按钮属性也被更高优先级的 gesture 取代，按钮点击功能不再有效。
如何既支持长按，又支持点击呢？这里提供的一个方案是，加入 onTap 操作：

// 通过onTapGesture来支持点击响应
struct ContentView: View {var body: some View {NavigationView {NavigationLink(destination: DestinationView(),label: {Text("Navigate View").onTapGesture {print("tap")}.onLongPressGesture {print("long press")}})}}
}

再次运行代码，这时候可以发现"tap"和"long press"都可以正确打印。

九、isActive 参数

在之前的代码中，已经可以用 onTapGesture 和 onLongPressGesture 来分别响应 NavigationLink 的交互，但是也发现了一个问题。NavigationLink 最重要的跳转问题，还没有得到解决。现在引进一个重要参数隆重登场：isActive，它是 NavigationLink 构造函数的一个参数，默认值为 .constant(true)，先来看看它的正确使用方法：

// 引入了isActive来手动跳转
struct ContentView: View {@State private var isActive = false // 定义isActive状态，默认为falsevar body: some View {NavigationView {NavigationLink(destination: DestinationView(),isActive: $isActive, // 绑定isActivelabel: {Text("Navigate View").onTapGesture {print("tap")isActive = true // 点击的时候，设置为true触发跳转}.onLongPressGesture {print("long press")}})}}
}

isActive 是 NavigationLink 插入二级页面的触发参数，如果它是个常量，为 false 时则不会触发，为 true 时则在点击的时候触发。但是如果参数是一个 @State 变量，则是由 @State 的变量值来决定是否插入二级页面。
在以上代码里，定义了名为 isActive 的 @State 变量，初始值为 false，并且将它绑定到 NavigationLink的isActive 参数中，当用户点击"Navigate View"时，触发 onTapGesture，在其实现代码中，设置 isActive 为 true，成功触发 destination 的载入操作，这时候如预期的加载 DestinationView。

十、更复杂案例：多个 NavigationLink 下的情况

在实战项目中，还会遇到更多关于 NavigationView 的挑战，但是方法总比问题多，总有应对之策。刚刚提到一个 @State 变量 isActive 可以解决由编程决定载入页面的问题。但是在项目实践中，往往有多个 NavigationLink，它们或者由 VStack 组成，或者由 ScrollView 组成。在这种情况下，一个 isActive 变量完全不够用。一个不够，就出动多个，用一个数组来解决问题。
现在用一个完整的程序代码来展示下用法：

// 通过数组控制页面的导航
import SwiftUIstruct ContentView: View {// 用数组替代单一的变量@State private var isActives: [Bool] = Array(repeating: false, count: 2)var body: some View {NavigationView {VStack {NavigationLink(destination: Text("Destination View 1"),isActive: $isActives[0],label: {Text("Navigate View 1").onTapGesture {print("tap 1")isActives[0] = true}.onLongPressGesture {print("long press 1")}})NavigationLink(destination: Text("Destination View 2"),isActive: $isActives[1],label: {Text("Navigate View 2").onTapGesture {print("tap 2")isActives[1] = true}.onLongPressGesture {print("long press 2")}})}}}
}@main
struct iOS_testApp: App {var body: some Scene {WindowGroup {ContentView()}}
}

运行程序，可以看到"Destination View 1"和"Destination View 2"都可以很好的响应点击、长按等交互：

十一、进阶技巧：NavigationLink 数目可变条件下的编程

通过 isActives 数组控制 NavigationLink 跳转的思路虽然是对的，但是示例代码并不能解决实际项目中的需求。因为在样例中 isActives 数组数目是已知的固定的，而在实际项目中，NavigationLink 数目可能是动态下发的，这种情况下该如何编码呢？
下面来看看，一个典型的根据数组元素构建的 NavigationLink 是如何编写的：

// 由数组items决定NavigationLink数量
struct ContentView: View {@State private var items: [Int] = []var body: some View {NavigationView {ScrollView {ForEach(items, id: \.self) { item inNavigationLink(destination: Text("Destination View \(item)"),label: {Text("Navigate View \(item)")})}}}.onAppear() {items = Array(arrayLiteral: 1, 2)}}
}

在以上代码中，NavigationLink 由 items 动态决定，而不是一段一段的写死，通过 ForEach 来逐个创建 NavigationLink，那么问题来了：如果在这种情况下实现原先的点击/长按需求，该怎么做？
解决方法有很多，在这里提供一个我的解决方案，代码如下：

// 动态的isActives数组完成状态绑定
struct ContentView: View {@State private var isActives: [Bool] = []@State private var items: [Int] = []var body: some View {NavigationView {ScrollView {ForEach(items, id: \.self) { item inNavigationLink(destination: Text("Destination View \(item)"),isActive: $isActives[self.items.firstIndex(of: item)!], // 正确的绑定item所对应的isActive数组位置label: {Text("Navigate View \(item)").onTapGesture {print("tap \(item)")isActives[self.items.firstIndex(of: item)!] = true // 点击的时候，获取正确的数组下标并修改绑定值}.onLongPressGesture {print("long press \(item)")}})}}}.onAppear() {items = Array(arrayLiteral: 1, 2)isActives = Array(repeating: false, count: items.count) // 动态创建isActives数组，和items数目保持一致}}
}

以上代码实现了用数组 isActives 动态绑定了每一个 NavigationLink 的 isActive 属性。在以上实现过程中，需要注意：
- 通过在 onAppear 下的代码，动态创建 isActives 数组，数组的个数和 items 数目保持一致：

isActives = Array(repeating: false, count: items.count)

在 ScrollView 循环创建 NavigationLink 的 ForEach 中，通过以下方式获得正确的下标：

self.items.firstIndex(of: item)!

- 把 $isActives[self.items.firstIndex(of: item)!] 绑定到 isActive 参数中；
- 在点击事件中，将绑定的数组元素设置为 true；

isActives[self.items.firstIndex(of: item)!] = true

SwiftUI之NavigationView的基础使用与进阶实践相关推荐

JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...
SQL语法之基础查询（进阶1）and条件查询（进阶2）
SQL语法体系学习笔记 SQL语法之基础查询(进阶1)and条件查询(进阶2) SQL语法之排序查询(进阶3)and常见函数(进阶4) SQL语法之分组函数,分组查询(进阶5)and连接查询(sql9 ...
Linux基础命令与进阶
目录标题 Linux基础命令与进阶关机命令 Linux 用户/用户组 1.增加一个用户组 2.删除一个用户组 3.修改用户组的属性 4.添加用户账号 5.删除帐号 6.修改帐号 7.用户口令的管理 ...
QTP自动化测试从零基础到精通进阶(脚本测试、VBS语法、描述性编程、测试框架)...
QTP自动化测试从零基础到精通进阶(脚本测试.VBS语法.描述性编程.测试框架) 网盘地址:https://pan.baidu.com/s/19yUptC8PBFZFfH-VpyUUpQ 提取码: a ...
HTML + CSS3 基础入门与进阶
HTML + CSS3 基础入门与进阶简介 1.前端三层 2.IDE简介 3.网页实时热更新 4.项目开发流程一.HTML 入门与进阶 1.HTML 语法与基础标签 (1)HTML5基础入门 (2 ...
视频教程-Kali Linux渗透测试基础入门到进阶实战全程课-渗透测试
Kali Linux渗透测试基础入门到进阶实战全程课本人有多年的服务器高级运维与开发经验,擅长计算机与服务器攻防及网络攻防技术!对网络安全领域有持续的关注和研究! 林晓炜 ¥499.00 立即订阅 ...
Linux零基础入门到进阶
在IT圈子里一直流传着这么一句话:身为程序员,一定要学Linux.播妞发现,很多小伙伴都听说过Linux,但却一知半解...... Linux是什么?Linux有必要学吗?学Linux有什作用?今天就 ...
python教程07-while语句的基本使用、for...in循环的使用、break与continue、打印矩形三角形九九乘法表、基础题、进阶题
python教程_小白入门/2020/7/20 行百里者半九十,你可一定要坚持下去啊前几天家里有事更新给耽误了,后续会稳定更新的,一起加油! 学习目标文章目录 python教程_小白入门/2020 ...
音视频开发基础知识到进阶剖析
全网最强音视频开发教学--音视频开发基础知识到进阶剖析 1.要掌握多深的原理才能开始做项目 2.音视频基础有哪些必须掌握的 3.进阶需要学习什么项目视频讲解如下,点击观看: 全网最强音视频开发--音 ...

SwiftUI之NavigationView的基础使用与进阶实践

一、前言

二、基本概念

三、设置标题栏

四、隐藏标题栏

五、编程实现页面返回逻辑

六、标题栏样式设置

七、进阶：去掉点击的交互特效

八、进阶：支持默认点击之外的更多交互

九、isActive 参数

十、更复杂案例：多个 NavigationLink 下的情况

十一、进阶技巧：NavigationLink 数目可变条件下的编程

SwiftUI之NavigationView的基础使用与进阶实践相关推荐

最新文章

热门文章