实战编程·使用SwiftUI从0到1完成一款iOS笔记App（二）

前提回顾

在上一章节中，我们从需求分析出发，经历产品原型设计、产品UI设计，到笔记App首页的实战编程开发，走出了从0到1完成一款iOS笔记应用的第一步。

下面，我们将继续完成笔记App的其他部分内容。

笔记App按照页面来划分，可以分为首页、新建笔记页面，在上一章我们完成了首页的编程，这一章节我们来看看“新建笔记”页面。如下图所示：

我们可以看到“新建笔记”页面和“首页”是层叠关系，即“新建笔记”页面是在首页的基础上，由下而上展开的弹窗。这种产品设计方式在之前的章节我们提及过，是一种中度提醒操作，用户的主观感受还放在首页上，基于首页编辑内容的一种交互形式。

在SwiftUI编程中，此类弹窗统称为ModelView模态弹窗。

模态弹窗

模态弹窗，是一种以临时出现的形式显示内容，需要明确的操作才能退出的弹窗。其主要目的有2个，一是帮助用户专注于一个独立任务或一组相关选项。二是确保用户接收到重要信息，并在必要时确保操作正确。

我们来设计简单的模态弹窗，模态弹窗需要有两个页面作为交互基点，我们先创建一个新的SwiftUI页面，命名为NewNoteView。如下图所示：

创建完成后，回到ContentView，定义模态弹窗的触发条件，通常使用Bool值作为触发条件，如下代码所示：

@State var showNewNoteView = false

模态弹窗的跳转需要使用到使用.sheet修饰符，绑定声明好的Bool值变量，如下代码所示：

NavigationView {
  ZStack {
    if noteItems.count == 0 {
      noDataView()
    } else {
      VStack {
        searchBarView()
        NoteListView()
      }
    }
    newBtnView()
  }
  .navigationBarTitle("念头笔记", displayMode: .inline)
}.sheet(isPresented: $showNewNoteView) {
            NewNoteView()
}

上述代码中，我们将.sheet修饰符修饰整个NavigationView包裹的首页视图，isPresented模态弹窗的触发动作绑定声明好的变量showNewNoteView，跳转的页面为新创建的NewNoteView。

最后是跳转的动作，当用户点击“新建笔记”按钮时，切换showNewNoteView以触发打开模态弹窗的动作，如下代码所示：

self.showNewNoteView = true

运行预览效果如下图所示：

新建笔记页面

来到NewNoteView页面，我们来完成“新建笔记”页面的相关样式内容，依旧是从上至下拆解页面元素，如下图所示：

“新建笔记”页面有顶部导航栏、标题输入框、内容输入框三块要素组成。

顶部导航栏

首先是顶部导航栏，顶栏由“关闭”按钮，“新建笔记”标题，“完成”按钮组成，标题我们可以使用NavigationView构建，如下代码所示：

NavigationView {
  Text("Hello, World!")
    .navigationBarTitle("新建笔记",displayMode: .inline)
}

按钮部分，我们可以单独构建按钮的样式，如下代码所示：

// MARK: 关闭按钮
func closeBtnView() -> some View {
    Button(action: {
    }) {
        Image(systemName: "xmark.circle.fill")
            .font(.system(size: 17))
            .foregroundColor(.gray)
    }
}
// MARK: 完成按钮
func saveBtnView() -> some View {
    Button(action: {
    }) {
        Text("完成")
            .font(.system(size: 17))
    }
}

下一步，我们只需要将这两个按钮加到NavigationView顶部导航上就可以了，这里使用到的修饰符是navigationBarItems，如下代码所示：

NavigationView {
    Text("Hello, World!")
        .navigationBarTitle("新建笔记", displayMode: .inline)
        .navigationBarItems(leading:closeBtnView(),trailing: saveBtnView())
}