实战编程·使用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()) }