前提回顾

在上一章节中，咱们从需求分析出发，阅历产品原型设计、产品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())
}

标题输入框

其次是标题输入框，输入框运用到TextField输入框组件，咱们需求提早运用@State声明好参数，如下代码所示：

@State var title: String
@State var isEditing = false

上述代码中，title变量为标题输入框输入的内容，isEditing变量则是检测当前输入框是否正在输入，用于状况检测和交互运用。

标题输入框的内容款式构建如下：

// MARK: 标题输入框
func titleView() -> some View {
    TextField("请输入标题", text: $title, onEditingChanged: { editingChanged in
        self.isEditing = editingChanged
    })
    .padding()
}

内容输入框

再次是内容输入框，与标题输入框不同，内容输入框能够输入多行的文字，因而这里运用的是TextEditor多行文本输入框，和TextField输入框组件运用办法类似，首先需求运用@State声明好参数，如下代码所示：

 @State var content: String

上述代码中，content变量为TextEditor内容输入框输入的内容，紧接着，内容输入框的内容款式构建如下：

// MARK: 内容输入框
func contentView() -> some View {
    ZStack(alignment: .topLeading) {
        TextEditor(text: $content)
            .font(.system(size: 17))
            .padding()
        if content.isEmpty {
            Text("请输入内容")
                .foregroundColor(Color(UIColor.placeholderText))
                .padding(20)
        }
    }
}

上述代码中，咱们创立了一个新的视图contentView内容输入框视图，在这里由于TextEditor多行文本输入框不像TextField输入框组件能够设置提示文字，因而输入开发者自己完结。

咱们完结的办法也很简略，运用ZStack层叠容器，当content输入的内容为空的时分，构建展现一个“请输入内容”文字，如此便完结了多行文本框的提示文字作用。

标题输入框titleView和内容输入框contentView的布局办法为纵向布局联系，咱们能够运用VStack垂直布局运用，分割线部分能够运用SwiftUI供给的Divider分割线容器。如下代码所示：

NavigationView {
    VStack{
        Divider()
        titleView()
        Divider()
        contentView()
    }
        .navigationBarTitle("新建笔记", displayMode: .inline)
        .navigationBarItems(leading: closeBtnView(), trailing: saveBtnView())
}

运转预览作用如下图所示：

交互逻辑

完结了“新建笔记”的页面款式后，咱们再来完结基础的页面交互。

封闭弹窗

在ContentView主页咱们运用.sheet修饰符触发翻开“新建笔记“页面，并运用showNewNoteView触发翻开模态弹窗，当showNewNoteView切换为true时，翻开“新建笔记”弹窗页面。

这里能够运用@Binding在NewNoteView页面双向绑定showNewNoteView参数，然后当点击“封闭”按钮时，切换showNewNoteView状况。

首先声明showNewNoteView参数，如下代码所示：

@Binding var showNewNoteView: Bool

咱们将点击“封闭”按钮时，切换showNewNoteView状况，如下代码所示：

self.showNewNoteView = false

由于NewNoteView新建笔记页面也在运用PreviewProvider预览，因而在该页面声明的一切没有默认值的变量，都需求创立变量默认值才干进行预览。

完结后，咱们还需求回到ContentView主页，对NewNoteView的参数进行双向绑定，如下图所示：

项目预览

运转预览作用如下图所示：

QQ20220919-231956-HD.gif

本章小结

由于项目较长，这里将分红几个章节完结，请按耐住性子一步一步完结。

在本章中，咱们完结了“新建笔记”页面，首次运用了TextField输入框、TextEditor多行文本输入框，并学会运用@Binding声明可双向绑定的变量，并完结“主页”页面、“新建笔记”页面之间的逻辑交互。

本章内容不多，也不太难，重要的是思维办法。许多时分页面的构建办法都是自上而下，然后逐步拆解的过程，而从代码来看又呈现自下而上构建页面的逻辑。

在编程过程中，每一块内容咱们几乎都选用抽离的办法，除了运用func界说View视图的办法，也能够更常用地运用建立子视图的办法创立View视图，因人而异吧。

接下来的章节，咱们将继续完结交互逻辑部分，请坚持等待吧～

快来着手试试吧～

版权声明

本文为稀土技能社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！