NavigationView 跳转和返回相关

SwiftUI 中的 NavigationView 相对应 object-c UIKit 中的 UINavigationController
其导航栏中包含有标题 title 、导航按钮(左、右导航按钮).

一、标题 title

系统默认是大标题 large 的选项,会单独一行居左的样式,在含有滚动的视图中会随着滚动轨迹回归到导航栏正中的位置;
若初始的时候就想将标题处于导航栏水平居中的位置,则将 navigationBarTitleDisplayMode 的属性设置为 inline 即可.

displayMode 即 TitleDisplayMode 枚举
1.automatic 继承前导航模式
2.inline 标准导航样式,一行排列
3.large 默认样式,单独一行,居左大标题

NavigationView {
    Text("")
        .navigationTitle("标题") // title
        .navigationBarTitleDisplayMode(.inline) // 标题布局模式
        .foregroundColor(Color.blue) // 颜色
}

二、导航按钮

在初始化 NavigationView 的基础上添加 toolbar 属性其中包含有 ToolbarItem 对其进行创建并配置所需的文字或按钮样式组件并绑定相对应的点击事件即可;
该流程与 oc 中的 UINavigationController 自定义 item 类似;
具体可参考如下 code

NavigationView {
    Text("")
        .navigationTitle("YHDemo") // title
        .navigationBarTitleDisplayMode(.inline) // 布局模式
        .foregroundColor(Color.blue) // 颜色
        .navigationBarBackButtonHidden(true) // 是否隐藏返回箭头
        .toolbar { // 导航按钮配置
            ToolbarItem(placement: .navigationBarLeading) {
                // 返回按钮
                Button(action: goback) {
                    // 按钮样式
                    Image(systemName: "chevron.left")
                        .foregroundColor(.gray)
                }
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                NavigationLink(destination: ContentView()) {
                    Text("Edit")
                }
            }
        }
}

三、跳转、返回事件

视图图层间切换跳转和返回则与 UINavigationController 中的 push 和 pop 类似,不过这里需要用到个新的组件 NavigationLink 搭配现有的 ToolbarItem 点击事件相互组合搭配;

1.跳转下一层级

ToolbarItem(placement: .navigationBarTrailing) {
    NavigationLink(destination: ContentView()) { // 跳转至 ContentView 视图
        Text("Edit")
    }
}

2.返回上一层级
首先,返回 dismiss 需要预先配置 presentationMode

@Environment(\.presentationMode) private var mode

其次,在对应方法中设置 dismiss
最后,将方法与事件相互绑定即可

ToolbarItem(placement: .navigationBarLeading) {
    // 返回按钮
    Button(action: goback) { // 绑定返回事件
        // 按钮样式
        Image(systemName: "chevron.left")
            .foregroundColor(.gray)
    }
}

...
private func goback() {
    withAnimation {
        self.mode.wrappedValue.dismiss()
    }
}

完整版

import SwiftUI

struct YHDemoView: View {
    @Environment(\.presentationMode) private var mode
    
    var body: some View {
        NavigationView {
            Text("")
                .navigationTitle("YHDemo") // title
                .navigationBarTitleDisplayMode(.inline) // 布局模式
                .foregroundColor(Color.blue) // 颜色
                .navigationBarBackButtonHidden(true) // 是否隐藏返回箭头
                .toolbar { // 导航按钮配置
                    ToolbarItem(placement: .navigationBarLeading) {
                        // 返回按钮
                        Button(action: goback) {
                            // 按钮样式
                            Image(systemName: "chevron.left")
                                .foregroundColor(.gray)
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        NavigationLink(destination: ContentView()) {
                            Text("Edit")
                        }
                    }
                }
        }
    }

    private func goback() {
        withAnimation {
            self.mode.wrappedValue.dismiss()
        }
    }
}

struct YHDemoView_Previews: PreviewProvider {
    static var previews: some View {
        YHDemoView()
    }
}

---

以上便是此次分享的全部内容，希望能对大家有所帮助!