1、导航跳转
- 页面A
import SwiftUI
struct ContentViewA: View {
@State var isNavPush = false
var body: some View {
NavigationView {
VStack {
NavigationLink(isActive: $isNavPush) {
NavPushViewB()
} label: {
}
Button {
isNavPush = true
} label: {
Text("导航跳转")
}
}.navigationTitle("页面A")
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentViewA()
}
}
- 页面B
import SwiftUI
struct NavPushViewB: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}
}
struct NavPushView_Previews: PreviewProvider {
static var previews: some View {
NavPushViewB()
}
}
来看下效果：
1.gif
2、导航设置
// 以上一份代码的页面“NavPushViewB”为例，来设置导航
import SwiftUI
struct NavPushViewB: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}.navigationTitle("页面B")
.padding()
}
}
struct NavPushView_Previews: PreviewProvider {
static var previews: some View {
NavPushViewB()
}
}
这个时候展示效果如下：
2.jpg
效果不能满足正常的要求，那么就来对导航进行设置：
import SwiftUI
struct NavPushViewB: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}.navigationBarTitle("页面B", displayMode: .inline) //设置标题displayMode，默认的是：automatic（大标题）
.navigationBarBackButtonHidden(true) //隐藏系统的导航返回按钮
.navigationBarItems(leading: Button(action: { //自定义导航的返回按钮
presentationMode.wrappedValue.dismiss() //返回上级页面
}, label: {
Image("nav_back_black") //导航返回按钮图标
}))
.padding()
}
}
}
struct NavPushView_Previews: PreviewProvider {
static var previews: some View {
NavPushViewB()
}
}
展示效果如下：
3.jpg
如此导航的基本设置就处理好了，下面处理下另外一种方式的页面跳转：
3、Present跳转（模态跳转）
import SwiftUI
struct ContentViewA: View {
@State var isNavPush = false
@State var isPresent = false
var body: some View {
NavigationView {
VStack {
NavigationLink(isActive: $isNavPush) {
NavPushViewB()
} label: {
}
Button {
isNavPush = true
} label: {
Text("导航跳转")
}.padding(.bottom, 30)
Button {
isPresent = true
} label: {
Text("Present跳转")
}
}.navigationTitle("页面A")
.sheet(isPresented: $isPresent, content: {// 模态跳转（未满屏）
PresentB()
})
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentViewA()
}
}
效果如下：
4.gif
- 跳转页面全屏展示
// 只需要将上面的 “ sheet”替换成“ fullScreenCover”的方式就可以了
.fullScreenCover(isPresented: $isPresent, content: {
PresentB()
})
效果如下：
5.gif
- 如果需要再模态跳转的“PresentB”页面加导航，直接加即可：
import SwiftUI
struct PresentB: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}.navigationBarTitle("PresentB", displayMode: .inline) //设置标题displayMode，默认的是：automatic（大标题）
.navigationBarBackButtonHidden(true) //隐藏系统的导航返回按钮
.navigationBarItems(leading: Button(action: { //自定义导航的返回按钮
presentationMode.wrappedValue.dismiss() //返回上级页面
}, label: {
Image("nav_back_black") //导航返回按钮图标
}))
.padding()
}
}
}
struct PresentB_Previews: PreviewProvider {
static var previews: some View {
PresentB()
}
}
效果如下：
6.gif
以上就是常用的两种页面跳转和导航栏的设置了，在常规项目的开发中，我们会遇到两个问题：
1、下导航tabbar所持有的页面（比如：“我的”页面）跳转到其他页面（比如：“个人资料”页面）的时候，下导航tabbar未隐藏（“个人资料”页面依然展示这下导航tabbar）的问题。
答：将NavigationView套在tabbar外层即可。
2、跳转页面后如何返回到指定的页面？（如：A->B->C->D，如何在D页面直接返回到B页面？或者返回到A页面？）
SwiftUI：导航返回到指定页面
