NavigationView 基础用法

一、介绍

在Swift中，我们使用了UINavigationController来控制界面的路由
在SwiftUI中，我们使用NavigationView来控制界面的跳转；

二、代码

• 简单使用

struct FirstView: View {
    var body: some View {
        NavigationView(content: {
            Text("首页")
            .navigationBarTitle("第一个", displayMode: .inline)
        })
    }
}

结果

• 统一设置导航条背景、文字颜色

struct FirstView: View {
    // 在init方法中，使用swift方法，设置
    init() {
        UINavigationBar.appearance().backgroundColor = .white
        UINavigationBar.appearance().tintColor = .black
        UINavigationBar.appearance().barTintColor = .black
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]
    }
    
    var body: some View {
        NavigationView(content: {
            Text("首页")
            .navigationBarTitle("第一个", displayMode: .inline)
        })
    }
}

效果图

• 设置导航条按钮

struct FirstView: View {
    
    var body: some View {
        NavigationView(content: {
            Text("首页")
            .navigationBarTitle("第一个", displayMode: .inline)
            .navigationBarItems(leading: Text("左边"), trailing: Text("右边"))
        })
    }
}

截图

• 跳转到下一个页面（NavigationLink）

struct FirstView: View {
    
    var body: some View {
        NavigationView(content: {
            NavigationLink(
                destination: SecondView(),
                label: {
                    Text("跳转下一页面")
                })
            .navigationBarTitle("第一个", displayMode: .inline)
        })
    }
}

• 手动返回到上一个页面

struct SecondView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        Button(action: {
            presentationMode.wrappedValue.dismiss()
        }, label: {
            Text("返回")
        })
        .navigationBarTitle("第二个", displayMode: .inline)
    }
}

四、demo

示例代码