NavigationView & NavigationLink in SwiftUI在SwiftUI中,Navigati

在SwiftUI中,NavigationView和NavigationLink用于实现视图之间的导航和跳转。

NavigationView:

用于构建一个导航界面结构,内部可以放置多个视图
会自动渲染一个Navigation Bar
支持多级导航,可以推入(push)和弹出(pop)视图

使用方式:

NavigationView {
  // 根视图
  
  NavigationLink {
    // 下一个视图
  } label: {
    // 链接标签
  }
}

NavigationLink:

定义在NavigationView内部的一个导航链接
点击后会推入一个新的视图到导航栈
label属性定义点击区域,destination属性定义跳转的视图

特征:

支持后退手势返回
可以通过isActive状态控制激活
支持传递绑定数据到下一个视图

综上,NavigationView和NavigationLink用于构建导航流程,点击NavigationLink可以顺畅地在视图间跳转导航。

下面看具体例子

上述示例中，使用NavigationView构建来一个列表。我们可以设置TitleDisplayModel, 它有三个值，分别为：

automatic
inline
large

效果如下：从左到右分别为 automatic -> inline -> large

当我们点击第一个蓝色的HELLO时，会导航到一个新的页面

我们现在把NavigationLink的destination值改成SecondView()。 代码如下

NavigationViewSample 代码：

struct NavigationViewSample: View {
    
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink("HELLO", destination: SecondView())
                Text("HELLO")
                Text("HELLO")
                Text("HELLO")
            }
            .navigationTitle("All Items")
            .navigationBarTitleDisplayMode(.automatic)
        }
    }
}

SecondView 代码：

struct SecondView: View {
    
    @Environment(.dismiss) var dismiss
    
    var body: some View {
        ZStack {
            Color.mint
                .edgesIgnoringSafeArea(.all)
                .navigationTitle("Second View")
                .navigationBarHidden(true)
            
            VStack {
                Button("BACK") {
                    dismiss()
                }
                
                NavigationLink("Click", destination: Text("Three screen"))
            }
        }
        .foregroundStyle(Color.black)
    }
}

注意：

在整个app中，只需要一个NavigationView，不要使用多个。
父类使用了NavigationView，那么我们可以直接在子类中来修改NavigatoinView的属性。在SecondView中我们就使用了隐藏属性，隐藏了NavigationBar。在SecondView中还可以继续使用NavigationLink，它会继续导航到下一层级页面。

如何添加NavigationBar button

只需要把代码添加到NavigationView的内部，就可以实现。根据需求，你可以自行添加左边或右边的按钮。这里都可以使用自定义方式来实现

struct NavigationViewSample: View {
    
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink("HELLO", destination: SecondView())
                Text("HELLO")
                Text("HELLO")
                Text("HELLO")
            }
            .navigationTitle("All Items")
            .navigationBarTitleDisplayMode(.automatic)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Image(systemName: "heart.fill")
                        .foregroundStyle(.red)
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: SecondView()) {
                        Image(systemName: "gear")
                            .tint(Color.black)
                    }
                }
            }
        }
    }
}

以下就是效果，左边和右边分别添加了两个button

基本介绍就这么多，需要注意的是：系统的方法会在不断的系统升级中会过期，在写法上有的会有一些差异。当方法不可用，请查阅最新的API。

对于今天的内容，大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ