SwiftUI(二)- 页面导航NavigationLink和Sheet窗口(模态视图)

官方文档对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("退出详情页") }) } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxsxj.html