实战教程·元宇宙来了，准备好你的电子名片了吗？（二）（2）

导航菜单：标题和新建卡片入口

卡片视图完善之后，我们来搭建顶部导航菜单。SwiftUI提供了NavigationView导航视图控件方便我们快速搭建应用的顶部导航菜单。从视图层级来看，顶部导航菜单是“包裹”整个页面视图的，因此NavigationView导航视图控件需要在ContentView的body视图最外层，如下代码所示：

NavigationStack {
    //视图内容
    .navigationBarTitle("文如秋雨",displayMode: .inline)
}

在iOS16版本，使用NavigationStack导航视图控件搭建顶部导航菜单，iOS16版本以下的机型使用NavigationView导航。

搭建好顶部导航栏后，我们创建一个新的按钮，作为创建身份卡片的入口。可以使用navigationBarItems导航栏按钮修饰符创建导航菜单上的按钮入口，不过在此之前，我们需要搭建好按钮的视图，再将按钮赋予navigationBarItems导航栏按钮修饰符。如下代码所示：

func addBtn() -> some View {
        Button(action: {
        }) {
            Image(systemName: "plus.circle.fill")
                .font(.system(size: 17))
                .foregroundColor(.blue)
        }
    }

上述代码中，我们完成了一个按钮视图addBtn。一般在编程过程中，若视图中除样式代码外还有交互操作，通常会将其抽离出来作为一个单独的视图进行构建，然后再在修饰符或者其他视图中使用，这是SwiftUI开发中经常会遇到的事情。

完成按钮视图的构建后，我们将按钮视图加到顶部导航菜单中，如下代码所示：

.navigationBarItems(trailing: addBtn())

模态弹窗：打开一个新页面

个人主页部分基本已经完成了，下面我们来完成点击顶部导航菜单的“添加”按钮，打开“新建身份卡”页面。

首先我们先创建一个新的SwiftUI文件，命名为NewView，如下图所示：

回到ContentView视图中，使用Sheet模态弹窗控件，创建打开弹窗的样式，如下代码所示：

.sheet(isPresented:Is Presented) {
   Content
 }

上述代码中，我们使用sheet修饰符控件搭建打开模态弹窗效果，但需要使用sheet修饰符控件，需要提前声明好触发打开动作的变量，如下代码所示：

@State var showNewView:Bool = false

并将声明好的触发变量绑定到sheet修饰符控件中，以及设置Content跳转的页面目标为NewView。如下代码所示：

.sheet(isPresented: $showNewView) {
  NewView()
}

最后在点击addBtn按钮视图时，切换showNewView打开视图的变量状态，便可实现点击“添加按钮”打开模态弹窗，如下代码所示：

self.showNewView.toggle()

关闭弹窗的方法也很类似，我们来到NewView视图，给NewView视图的内容添加顶部导航菜单，并也创建一个关闭弹窗的按钮，如下代码所示：

struct NewView: View {
    var body: some View {
        NavigationStack {
            Text("Hello, World!")
                .navigationBarTitle("添加身份卡", displayMode: .inline)
                .navigationBarItems(trailing: closeBtn())
        }
    }
    func closeBtn() -> some View {
        Button(action: {
        }) {
            Image(systemName: "xmark.circle.fill")
                .font(.system(size: 17))
                .foregroundColor(.gray)
        }
    }
}

上述代码中，我们使用的方法和个人主页的内容基本一致，使用NavigationStack导航菜单控件创建导航菜单，并使用navigationBarTitle顶部导航标题控件创建标题。单独创建关闭按钮视图closeBtn，并将它赋予导航菜单中的navigationBarItems导航菜单栏目修饰符，以创建导航菜单上的按钮。