在SwiftUI 上設計多畫面

NavigationView

這邊來介紹一下 NavigationView，SwiftUI 利用 NavigationView 管理切換多層頁面，它使我們能夠輕鬆推送push和退出pop頁面，以清晰，分層的方式展示我們的畫面

前面沒介紹到，對應 UIKit framework 中的 UINavigationController，運用到 Navigation Controller 來讓畫面多出頁首的 Navigation Bar 來方便我們切換頁面

官方文件

只需要在元件庫搜尋並拖拉 NavigationView 或在程式碼當中把第一個頁面用 NavigationView 包起來就可以了，可以在其 NavigationView 內部添加標題欄、頁面內容，以及底部導航欄等等

例如在 NavigationView { } 裡的元件 VStack 呼叫navigationTitle()來設定標題，可以通過添加displayMode參數來自定義標題的樣式

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack {
                Text("Hello, world!")
                    .font(.largeTitle)
                    .foregroundColor(Color.blue)
                    .multilineTextAlignment(.center)
                    .padding()
                    .border(Color.black, width: 1)
                Text("Test")
                Button(action: {
                    print("test")
                }) {
                    Text("Test")
                        .font(.system(size: 30))
                        .background(Color.yellow)
                        .foregroundColor(.red)
                }
            }.navigationBarTitle("標題", displayMode: .inline)
        }
    }
}

之後我們來創建第二頁的 View：

struct SecondView: View {
    var body: some View {
        Button("返回") {
        }
    }
}

接下來就要透過 NavigationLink 來連結到SecondView

NavigationLink

頁面的跳轉和傳值，用於頁面的跳轉和傳值，透過從元件庫新增拖拉或在程式區塊中新增NavigationLink，生成的NavigationLink需要我們來自行完成設定，其中參數 destination 代表點選後會前往的頁面，label代表 NavigationLink 顯示的內容

                NavigationLink(
                    destination: SecondView(),
                    label: {
                        Text("Next")
                    })

這樣在點擊Next 時就會跳轉至SecondView頁，完成了最基本的換頁

頁面之間的傳值

這邊就可以搭配SwiftUI 的數據流來完成頁面間的傳值

範例：

struct ContentView: View {
    @State var passedData:String = "init value"
    
    var body: some View {
        NavigationView {
            VStack{
                TextField("input passed data", text: $passedData)
                    .multilineTextAlignment(.center)
                NavigationLink(
                    destination: SecondView(message: $passedData),
                    label: {
                        Text("next")
                    })
            }
        }
    }
}

struct SecondView: View {
    @Binding var message : String
    
    var body: some View {
        VStack {
            Text(message)
            TextField("input backed data", text: $message).multilineTextAlignment(.center)
        }
    }
}