一 學(xué)習(xí)目標(biāo)

在SwiftUI中導(dǎo)航欄的使用

二 學(xué)習(xí)效果

image.png

image.png

image.png

三 主要操作步驟

3.1 添加導(dǎo)航欄

var body: some View {
    NavigationView {
        VStack{

        }.navigationBarTitle("導(dǎo)航欄")
    }
}

image.png

3.2 導(dǎo)航欄模式

displayMode參數(shù)來自定義標(biāo)題的顯示方式。

1. .large選項顯示大標(biāo)題，這對于導(dǎo)航堆棧中的頂級視圖很有用。
2. .inline選項顯示小標(biāo)題，這些小標(biāo)題對于導(dǎo)航堆棧中的輔助視圖，第三視圖或后續(xù)視圖很有用。
3. .automatic選項是默認(rèn)選項(初始默認(rèn) .large)，它使用前面視圖使用的選項。

var body: some View {
        NavigationView {
            VStack{
                
            }.navigationBarTitle("導(dǎo)航欄(.inline)", displayMode: .inline)
        }
    }

image.png

var body: some View {
        NavigationView {
            VStack{
                
            }.navigationBarTitle("導(dǎo)航欄(.large)", displayMode: .large)
        }
    }

image.png

3.3 導(dǎo)航欄標(biāo)題顏色

image.png

init() {
    // 導(dǎo)航欄標(biāo)題顏色
    UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
    UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
}

3.4 導(dǎo)航欄返回鍵的顏色

image.png

init() {
    // 導(dǎo)航欄返回鍵的顏色
    UINavigationBar.appearance().tintColor = .yellow
}

3.5 導(dǎo)航欄橫屏切換

默認(rèn)情況下iphone橫屏?xí)吹絻蓚€視圖,一個是第一頁面的導(dǎo)航圖,一個是下一頁的詳情圖

IMG_0DD5ED8566B5-1.jpeg

NavitationView 設(shè)置模式.navigationViewStyle(StackNavigationViewStyle()) 可以解決這個問題

var body: some View {
        NavigationView {
            ZStack{
                Color.red
            }
            .navigationBarTitle("標(biāo)題")
        }.navigationViewStyle(StackNavigationViewStyle())
    }

參考:

1. SwiftUI:NavigationView