官方文档对NavigationLink的定义:
A button that triggers a navigation presentation when pressed.
SwiftUI中的页面跳转都是由NavigationLink来进行管理的
1、简单跳转 import SwiftUI struct ContentView: View { let detail = Detail() var body: some View { VStack { NavigationLink(destination: Detail()) { Text("跳转") } } } } struct Detail: View { var body: some View { Text("详情页") } } 2、使用isActive进行自动跳转子页面在某些场景中跳转子页面需要在代码中控制,NavigationLink提供了isActive属性,来实现这一自动跳转功能
struct ContentView: View { @State var isActive = false let detail = Detail() var body: some View { VStack { NavigationLink(destination: Detail(), isActive: $isActive) { Text("跳转") } Spacer().frame(width: 1, height: 20, alignment: .center) Button("自动跳转") { //每次打印isActive都是false,说明这是一个状态位标识 print(self.isActive) self.isActive = true } } } } 3、使用sheet方法弹出模态窗口(Modal)在SwiftUI中不存在UIKit中的Modal跳转,取而代之的是称之为Sheet的窗口,方法继承自View基础视图,既SwiftUI中任一视图都可以弹出Sheet窗口
struct ContentView: View { @State var isActive = false @State var isModal = false let detail = Detail() var body: some View { VStack { NavigationLink(destination: Detail(), isActive: $isActive) { Text("跳转") } Spacer().frame(width: 1, height: 20, alignment: .center) Button("自动跳转") { //每次打印isActive都是false,说明这是一个状态位标识 print(self.isActive) self.isActive = true } Spacer().frame(width: 1, height: 20, alignment: .center) Button("Modal跳转示例") { //每次打印isModal都是false,说明这是一个状态位标识 print(self.isModal) self.isModal = true }.sheet(isPresented: $isModal, onDismiss: { print("Detail View Dismissed") }) { Detail() } } } } 4、使用PopOver方法弹出模态窗口(Modal)使用方法与Sheet类似:
Button("PopOverModal跳转示例") { //每次打印isPopOver都是false,说明这是一个状态位标识 print(self.isPopOver) self.isPopOver = true }.popover(isPresented: $isPopOver, content: { Detail() }) 5、使用环境变量presentationMode实现手动返回父页面通过NavigationLink跳转到子级页面的视图可以通过回退按钮返回父视图,Sheet窗口可以通过下滑实现返回父视图
除此以外还可通过环境变量presentationMode来手动返回父页面,对于NavigationLink和Sheet都适用
struct Detail: View { @Environment(\.presentationMode) var mode var body: some View { Button(action: { self.mode.wrappedValue.dismiss() }, label: { Text("退出详情页") }) } }