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("退出詳情頁")
        })
        
    }
}