iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Software Development

iOS 學習筆記系列 第 11

Day11 SwiftUI 04 - 在SwiftUI 上設計多畫面

在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 顯示的內容

https://ithelp.ithome.com.tw/upload/images/20210926/20118479GKkpylVvyt.png

                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)
        }
    }
}

上一篇
Day10 SwiftUI 03 - SwiftUI 數據流
下一篇
Day12 SwiftUI 05 - Life Cycle - SwiftUI App
系列文
iOS 學習筆記30

尚未有邦友留言

立即登入留言