实战编程·使用SwiftUI从0到1完成一款iOS笔记App（一）
项目起源
前段时间稀土掘金客户端上线了“闪念笔记”功能，作为尝鲜一族便稍微体验了一下。
闪念笔记界面简约操作容易上手，相比较印象笔记、有道云笔记等综合型笔记应用，当前闪念笔记当前专注于笔记本身，只作为一种知识储备的记录工具。
深入研究后发现了点意外之喜，以稀土掘金流量口结合的闪念笔记，与Web端应用、浏览器剪藏插件相融合可以构成闭环产品生态体系。
不难猜想，在笔记工具功能完善和使用率覆盖一定市场份额后，必将正式打造移动端和桌面版应用，切入笔记类工具领域杀出一条血路。
当然，以上仅仅只是猜想。
进入正题，本章我们来搭建第一个SwiftUI实战项目，从0到1完成一款iOS笔记App。
需求分析
一款最小MVP的笔记App是怎样的呢？及时记录自己的想法、念头，搜索自己曾经记录的笔记，这是一款笔记最基本的功能需求点。
我们先梳理产品架构图，如下图所示：
一款最简单的笔记软件，包含2个核心页面：
- 首页界面：展示笔记列表、新建笔记按钮，若是做功能强化，可以加上搜索栏；
- 新建按钮：点击按钮，打开“新建页面”弹窗，或者进入新的页面，编辑完成关闭/回到首页；
产品设计
下一步，我们来完成产品的原型设计，构建2个页面，并将产品架构中的元素信息转换为页面功能，如下图所示：
用户首次进入时，念想笔记将会展示一个空白页，空白页面由标题、缺省图、指引文字、新建笔记按钮组成，主要引导用户进行主要功能的使用。
当用户点击新建笔记按钮时，唤起“新建笔记”弹窗页面，弹窗页面相比较进入一个新的页面，用户思维不会被强行打断，这是一种很好的交互。
在“新建笔记”页面中，主要操作为“返回”按钮、“完成”按钮、标题输入框、内容输入框。
用户点击“返回”按钮，则向下关闭该弹窗，并清空该页面已输入内容；
当用户点击“完成”按钮时，需要判断“标题输入框”、“内容输入框”是否有键入的文字，且符合预设的规则（文字数量等）；
当满足规则时，则吐司提示保存成功，并关闭该弹窗页面，且在笔记列表中插入一条新的笔记。若不满足规则（校验标题和内容是否为空），则吐司冒泡提示相关信息（标题不能为空、内容不能为空）。
为更好地指引用户填写，标题输入框需要有提示文字，当文字键入时，清空提示文字，内容输入框同理。
对于搜索功能，核心点在于根据内容关键字进行搜索，并实时进行反馈。当然通常由于性能问题，会考虑输入后点击“搜索”触发搜索功能的交互方式。
以上就是简单的需求文档的撰写。
UI设计
下面我们使用AdobeXD根据产品原型图绘制UI设计稿，UI设计稿需要包含所有的页面及其交互动作，如下图所示：
UI设计需要根据产品原型的元素和内容，结合当前市场上的常用交互逻辑和设计规范，输出高保真的设计稿。其中包含各项元素组件的尺寸规范、文字规范、交互规范等，旨在为前端开发人员提供很好的样式开发指引。
UI设计师和产品经理的分工常常是产品经理提供产品原型Demo，UI设计师确定产品的主体风格和设计规范，输出UI设计稿，再与产品经理或者与业务团队进行评审，通过后方可进行切图，移交给下一流程。
UI设计稿最为App最终呈现的效果产物，前端工程师需要根据UI设计稿达到一比一还原，后期也可以与UI设计稿进行对比进行App样式验收。
在这里科普一个概念，切图。
切图是UI设计师将已经完成好的静态页面中的元素使用工具进行切分，与静态页面分离，示例：图标按钮、插图。UI设计师将这些需要在实际开发过程中需要导入使用的素材从静态页面上“切”下来，便可以在下面的协同工具中导出不同尺寸的图片进行使用。
UI设计师切好图后，需要再借助一个工具交付给前端设计师，这里推荐的工具是PxCook像素大厨。
安装完成，AdobeXD将会安装对应的插件，选择文件 > 导出 > PxCook。如下图所示：
PxCook将会被唤起，并创建一个新项目，输入“念头笔记”，选择类型为iOS，点击“创建本地项目”，如下图所示：
选择导入画板，PxCook会自动勾选由AdobeXD导出的所有面板，我们保持全选状态，点击“导入”，如下图所示：
如此，我们便将AdobeXD中的UI设计稿导入到PxCook中了。
在PxCook中，我们可以看到UI设计稿设计的元素的尺寸、元素之间的相对距离，方便于开发者根据UI设计稿进行前端静态页面的开发工作，如下图所示：
