SwiftUI一起学之十 -- 导航栏

一 学习目标

在SwiftUI中导航栏的使用

二 学习效果

image.png

image.png

image.png

三 主要操作步骤

3.1 添加导航栏

var body: some View {
    NavigationView {
        VStack{

        }.navigationBarTitle("导航栏")
    }
}

image.png

3.2 导航栏模式

displayMode参数来自定义标题的显示方式。

1. .large选项显示大标题，这对于导航堆栈中的顶级视图很有用。
2. .inline选项显示小标题，这些小标题对于导航堆栈中的辅助视图，第三视图或后续视图很有用。
3. .automatic选项是默认选项(初始默认 .large)，它使用前面视图使用的选项。

var body: some View {
        NavigationView {
            VStack{
                
            }.navigationBarTitle("导航栏(.inline)", displayMode: .inline)
        }
    }

image.png

var body: some View {
        NavigationView {
            VStack{
                
            }.navigationBarTitle("导航栏(.large)", displayMode: .large)
        }
    }

image.png

3.3 导航栏标题颜色

image.png

init() {
    // 导航栏标题颜色
    UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
    UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
}

3.4 导航栏返回键的颜色

image.png

init() {
    // 导航栏返回键的颜色
    UINavigationBar.appearance().tintColor = .yellow
}

3.5 导航栏横屏切换

默认情况下iphone横屏会看到两个视图,一个是第一页面的导航图,一个是下一页的详情图

IMG_0DD5ED8566B5-1.jpeg

NavitationView 设置模式.navigationViewStyle(StackNavigationViewStyle()) 可以解决这个问题

var body: some View {
        NavigationView {
            ZStack{
                Color.red
            }
            .navigationBarTitle("标题")
        }.navigationViewStyle(StackNavigationViewStyle())
    }

参考:

1. SwiftUI:NavigationView