美文网首页
NavigationView 基础用法

NavigationView 基础用法

作者: fanren | 来源:发表于2021-06-11 09:20 被阅读0次

一、介绍

在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

示例代码

相关文章

网友评论

      本文标题:NavigationView 基础用法

      本文链接:https://www.haomeiwen.com/subject/dsjjeltx.html