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

举报
Serendipity·y 发表于 2022/05/11 01:26:08 2022/05/11
【摘要】 一、前言 在 UIKit 的框架中,我们时常使用 UINavigationViewController 来管理页面的 push 和 pop,这是页面管理的基本操作。而到了 SwiftUI,该操作是交由 ...

一、前言

  • 在 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 SwiftUI

struct 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状态,默认为false
    var body: some View {
        NavigationView {
            NavigationLink(
                destination: DestinationView(),
                isActive: $isActive, // 绑定isActive
                label: {
                    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 SwiftUI

struct 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 in
                    NavigationLink(
                        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 in
                    NavigationLink(
                        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

文章来源: blog.csdn.net,作者:╰つ栺尖篴夢ゞ,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/Forever_wj/article/details/124666341

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200