开发语言：SwiftUI 2.0
开发环境：Xcode 12.0.1
发布平台：IOS 14
由于SwiftUI不在使用UIKit框架，所以使用了与UIKit不同的界面跳转，主要有两种
1、 sheet和fullScreenCover
如果我们希望从屏幕底部弹出下一个界面，则使用此方式，例如：
struct MainView: View {
@State private var isPresented = false
var body: some View {
Button("ttt") {
self.isPresented = true
}.sheet(isPresented: $isPresented, content: {
NextView()
})
}
}
struct NextView: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
VStack {
Rectangle()
.frame(width: 640, height: 480)
.foregroundColor(.green)
.onTapGesture(count: 1, perform: {
self.presentationMode.wrappedValue.dismiss()
})
Spacer()
}.edgesIgnoringSafeArea(.all)
}
}
通过点击主界面的button按钮，弹出一个NextView，在NextView中，通过以下方法返回至MainView。
self.presentationMode.wrappedValue.dismiss()
通过sheet实现的跳转效果如图所示：
在IOS13后，苹果大部分内置程序在由底至上弹出时，都可以看见其上一级的View/Controller，但往往我们只想全屏当前的View/Controller，在UIKit中，我们修改modalPresentationStyle为fullScreen来实现全屏显示，而在SwiftUI中，我们不再使用sheet跳转，而改用fullScreenCover，来实现全屏显示，我们只需要将上例中的sheet修改为fullScreenCover，即可看到效果。
2、 navigationView和navigationLink
2.1、系统默认效果
如果我们希望从屏幕右边弹出下一个界面，则使用navigationView配合navigationLink，例如
struct MainView: View {
var body: some View {
NavigationView{
VStack {
NavigationLink(destination:
NextView()) {
Text("next")
}
Spacer()
}.navigationTitle("MainView")
}
}
}
struct NextView: View {
var body: some View {
VStack {
NavigationLink(destination:
ThirdView()) {
Rectangle()
.frame(width: 640, height: 480)
.foregroundColor(.green)
}
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("NextView")
}
}
struct ThirdView:View {
var body: some View {
VStack {
Rectangle()
.frame(width: 640, height: 280)
.foregroundColor(.red)
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("ThirdView")
}
}
第一个界面
第二个界面
第三个界面
在例子中，我们创造了3个View，从MainView跳转至NextView，从NextView跳转至ThirdView，其中MainView作为跳转的第一个界面，使用了NavigationView，其中的text，NextView中的Rectangle，都使用NavigationLink来实现跳转功能。并且我们在三个界面中，均设置了navigationTitle，这些都是IOS默认的行为。
可以看见navigationTitle不仅作为当前界面的标题，也会作为下一个界面的返回名称。
- navigationTitle是IOS14中的函数，IOS13可以使用navigationBarTitle代替
- IOS14中，可以通过长按返回按钮，弹出所有跳转画面，然后选择任意一个，可以直接回退到此界面
2.2、隐藏navigationTitle
在实际的开发中，我们往往不会使用系统默认的navigationTitle，此时我们可以通过以下两个函数隐藏系统的navigationTitle，然后使用presentationMode实现返回功能。
struct ThirdView:View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
VStack {
Rectangle()
.frame(width: 640, height: 280)
.foregroundColor(.red)
.onTapGesture(count: 1, perform: {
self.presentationMode.wrappedValue.dismiss()
})
Spacer()
}
.edgesIgnoringSafeArea(.all)
//隐藏包括标题和返回键在内的所有系统导航栏
.navigationBarHidden(true)
//只隐藏系统导航栏中的返回键
.navigationBarBackButtonHidden(true)
}
}
- 在某个IOS13的版本，只使用navigationBarHidden会导致navigationBar原有位置的所有手势失效，需要额外设置navigationBarTitle("")
2.3、跳转风格
IOS内置了两种跳转风格，通过navigationViewStyle设置
var body: some View {
NavigationView{
VStack {
NavigationLink(destination:
NextView()) {
Text("next")
}
Spacer()
}.navigationTitle("MainView")
}
.navigationViewStyle(StackNavigationViewStyle())
}
2.3.1 StackNavigationViewStyle
此风格的样式为2.2中例子中的样式，永远从右边弹出下一个界面，在此就不详细举例了。
2.3.2 DoubleColumnNavigationViewStyle
在某些大屏设备或者IPad上，程序可以同时显示两个View（类似IPad的系统设置界面），如果这种需求，则使用此风格
- navigationViewStyle在IOS有个默认类型DefaultNavigationViewStyle
- 但是实际使用我发现与DoubleColumnNavigationViewStyle并没有什么区别
struct MainView: View {
var body: some View {
NavigationView{
//left
NavigationLink(destination:
NextView()) {
Text("next")
}
.navigationTitle("MainView")
//right
FirstView()
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
struct FirstView : View {
var body: some View {
VStack {
Text("first")
Spacer()
}.navigationTitle("FirstView")
}
}
struct NextView: View {
var body: some View {
VStack {
NavigationLink(destination:
ThirdView()) {
Rectangle()
.frame(width: 640, height: 480)
.foregroundColor(.green)
}
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("NextView")
}
}
struct ThirdView:View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
VStack {
Rectangle()
.frame(width: 640, height: 280)
.foregroundColor(.red).onTapGesture(count: 1, perform: {
self.presentationMode.wrappedValue.dismiss()
})
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("ThirdView")
}
}
效果如下：
第一个界面
第二个界面
第三个界面
要注意的是在MainView中NavigationView包裹了2个子View，一个是用于跳转至NextView的NavigationLink，一个是默认显示的FirstView，这2个View配合navigationViewStyle的显示逻辑如下：
免责声明：以下的显示逻辑是我经过测试后得出的结论，不保证完全正确
系统根据当前设备横竖屏状态和尺寸，判断如果当前屏幕可以同时放下2个VIew，则会将NavigationView的第一个子View作为分屏显示的左侧View，将第二个子View作为分屏显示的右侧默认View。否则视与StackNavigationViewStyle一致。
默认情况下，无论是左侧View包含NavigationLink，或者右侧View包含NavigationLink，通过跳转后出现的新的View都会出现在右侧。在上例中，左侧View是MainView，使用其中的NavigationLink，将NextView弹入，由于NextView不是由默认的右侧View（FirstView）弹入，所以此时NextView取代了FirstView的位置，成为了右侧的RootView。
如果我们调换下左右View的顺序，左侧View为FirstView，右侧View为MainView，此时NextView是由右侧的MainView弹出，所以NextView又出现了返回按钮。
var body: some View {
NavigationView{
//left
FirstView()
//right
NavigationLink(destination:
NextView()) {
Text("next")
}
.navigationTitle("MainView")
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
从右侧View弹出NextView
我们也可以通过属性isDetailLink，来设置是否在右侧弹出，
struct MainView: View {
var body: some View {
NavigationView{
//left
NavigationLink(destination:
NextView()) {
Text("next")
}
//屏蔽右侧弹出，弹出位置为点击时的View，这里为左侧
.isDetailLink(false)
.navigationTitle("MainView")
//right
FirstView()
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
弹出后的效果如下：
在左侧View中弹出NextView
2.4、返回至首页/某一页
有时候，我们自定义的返回按钮想回到某个首页。可以通过如下方法实现。
class NavigationAction: ObservableObject {
@Published var backToRoot: Bool = false
}
struct MainView: View {
@EnvironmentObject var action: NavigationAction
var body: some View {
NavigationView{
NavigationLink(destination: NextView(),
isActive: $action.backToRoot) {
Text("next")
}
.navigationTitle("MainView")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct NextView: View {
var body: some View {
VStack {
NavigationLink(destination:
ThirdView()) {
Rectangle()
.frame(width: 640, height: 480)
.foregroundColor(.green)
}
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("NextView")
}
}
struct ThirdView:View {
@EnvironmentObject var action: NavigationAction
var body: some View {
VStack {
Rectangle()
.frame(width: 640, height: 280)
.foregroundColor(.red).onTapGesture(count: 1, perform: {
self.action.backToRoot = false
})
Spacer()
}
.edgesIgnoringSafeArea(.all)
.navigationTitle("ThirdView")
}
}
首先，为整个View创建了一个EnvironmentObject，其中包含了一个backToRoot，绑定至NavigationLink的isActive属性，同时在ThirdView中获取到EnvironmentObject，在点击红色背景时，设置了backToRoot为false，由于绑定至NavigationLink，触发SwiftUI重构MainView，此时backToRoot为false，则不再展示弹出的View了。
网友评论