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

NavigationLink

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

    }
}