标题输入框
其次是标题输入框，输入框使用到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的参数进行双向绑定，如下图所示：
项目预览
运行预览效果如下图所示：
本章小结
由于项目较长，这里将分成几个章节完成，请按耐住性子一步一步完成。
在本章中，我们完成了“新建笔记”页面，首次使用了TextField输入框、TextEditor多行文本输入框，并学会使用@Binding声明可双向绑定的变量，并实现“首页”页面、“新建笔记”页面之间的逻辑交互。
本章内容不多，也不太难，重要的是思维方式。很多时候页面的构建方式都是自上而下，然后逐步拆解的过程，而从代码来看又呈现自下而上构建页面的逻辑。
在编程过程中，每一块内容我们几乎都采用抽离的方式，除了使用func定义View视图的方式，也可以更常用地使用建立子视图的方式创建View视图，因人而异吧。
接下来的章节，我们将继续完成交互逻辑部分，请保持期待吧～
快来动手试试吧～
