/

SwiftUI：NavigationView視圖

SwiftUI：NavigationView視圖

NavigationView視圖是非常重要的視圖，您會一直使用它。

1
2
3
NavigationView {

}

一旦將視圖包裝到NavigationView中，您可以使用navigationTitle()修改器為視圖添加標題：

1
2
3
4
NavigationView {
    Text("Hello")
        .navigationTitle("Welcome")
}

然而，最重要的好處是現在我們可以使視圖成為導航到其他視圖的鏈接。

首先，我們創建另一個視圖。您可以將它添加到相同的文件中，也可以添加到項目中的另一個文件中：

1
2
3
4
5
struct ThanksView: View {
    var body: some View {
        Text("Thanks for checking out the app!")
    }
}

然後，將“Hello” Text視圖包裝到NavigationLink視圖中，其中我們將目的地參數設置為ThanksView：

1
2
3
4
5
6
NavigationView {
    NavigationLink(destination: ThanksView()) {
        Text("Hello")
            .navigationTitle("Welcome")
    }
}

現在，許多事情正在自動進行：Hello文本變為藍色並可點擊：

一旦我們點擊它，我們將顯示ThanksView和返回原始視圖的鏈接。左上角按鈕中顯示的文本來自我們設置的navigationTitle修改器：

以下是示例中使用的完整代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import SwiftUI

struct ThanksView: View {
    var body: some View {
        Text("Thanks for checking out the app!")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: ThanksView()) {
                Text("Hello")
                    .navigationTitle("Welcome")
            }
        }
    }
}

這是在視圖之間導航的其中一種方式，我會說這是最簡單的方式。

有時，在導航到另一個視圖之前，您希望執行一些操作。在這種情況下，我們可以有一個布爾屬性showThanks，當我們希望ThanksView出現時可以將其設置為true。當用戶點擊按鈕時，我們這樣做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
struct ContentView: View {
    @State private var showThanks = false

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: ThanksView(), isActive: $showThanks) {}

                Button("Hello") {
                    showThanks = true
                }
                .navigationTitle("Welcome")
            }
        }
    }
}

應用程序的外觀與之前完全相同，但是現在當用戶點擊按鈕時，我們可以做些什麼，例如記錄過渡或其他任何操作：

1
2
3
4
Button("Hello") {
    showThanks = true
    print("Transitioned to ThanksView")
}

請記住，print()在預覽模式下不會記錄，僅在模擬器中才會記錄。

tags: [“SwiftUI”, “NavigationView”, “View Navigation”]