[SwiftUI练级-1] 餐费计算器 · part1
更多内容欢迎关注公众号：BoBo清吧
SwiftUI是一个为iOS，macOS，tvOS，乃至watchOS构建交互式应用的强大框架。当然，在学习它之前，你需要先熟悉Swift语言本身：这是一门强大而且灵活的现代编程语言。
如果你对Swift语言还不是很了解，可以移步阅读我的《极速Swift》系列文章，对Swift语言来一个速览。
如果你已经熟悉Swift语言，那就让我们即刻开始项目实践吧。
AA餐费计算器(WeSplit) - 介绍
这是一个演示项目，构建的app是去饭店吃饭后可以用到的AA餐费计算器。你输入餐费，选择要留的小费比例，用餐人数，app会告诉你每个人需要付的费用。
项目非常简单，目的是教你一些SwiftUI的基础知识。
你将了解到UI设计的基础，如何让用户输入数值，如何从选项中选取，以及如何跟踪程序状态。由于是第一个项目，我会放慢节奏，解释清每一个概念。
项目被分为三个阶段：
介绍你将用到的各种技术
手把手的项目构建导引
需要你自行完成的挑战
每个阶段都很重要，因此不要着急推进。
第一步，我将介绍独立的组件，以便你理解它们每一个是如何工作的。代码会有不少，包括我的解释性描述。这个步骤会放在概览中： 关于是什么，怎么工作，以及如何使用。
第二步，把学习到的组件应用于实践。你将得到更多的上下文，为什么我们要用它们，它们是如何与其他组件配合的。
最后一步我们将总结学到的知识。
长话短说，让我们开始吧。
启动Xcode，选择创建一个新的Xcode项目，你会面对一组选项，请选择iOS和Single View App，然后点击下一步，在下一屏的向导设置中，你需要这么做：
Product Name 输入 “WeSplit”
Organization Identifier 输入任何你想要的反向域名的字符串
Language 选择 Swift
User Interface 选择 SwiftUI
确保底部所有的checkbox没有勾选。
一切准备好后，点击Next，然后选择你想要存储项目的位置，最后点击Create。Xcode将为你创建好工程，并且打开编辑器。
稍后我们将基于这个工程构建我们的AA餐费计算器，不过目前为止我们只需要把这个工程当成试验代码的沙盒环境就好。
动手完成吧！
了解一个SwiftUI应用的基本结构
当你创建一个SwiftUI应用时，你将得到一组总计100行左右代码的文件。大部分代码其实什么事也没做，只是占位符而已，你可以先忽略它们。随着教程推进，这些占位符的代码将会被修改。
在Xcode中，你会在左边的空间看到这些文件，这个空间被称为project navigator：
AppDelegate.swift 包含管理app的代码。过去经常需要在这里添加代码，不过现在已经很少了。
SceneDelegate.swift 包含启动app窗口的代码。在iPhone上这个类做的事情不多，但是在iPad上，可能同一时间有几个app打开，因此这个类很重要。
ContentView.swift 包含程序UI的初始化代码，也是我们这个项目中所有逻辑书写的地方。
Assets.xcassets 是一个asset catalog，app中所有图片资源的集合。除了app图标， iMessage贴纸，你还可以在这里添加颜色。
LaunchScreen.storyboard 是一个创建小块UI的视觉编辑器，这些UI会在app启动时展示。
Info.plist 是一个特殊值的集合。这些值向系统描述你的app如何工作，包括它的版本，支持的设备方向，等等。这些虽然不是代码，但也十分重要。
Preview Content 是一个黄色的组，内部有 Assets.xcassets，这是另一个asset catalog，向你展示程序运行时是长什么样。
由于项目中所有的逻辑都位于ContentView，Xcode已经为你打开了这个文件。文件头部有一些注释，你也可以在这里添加你自己的说明。
注释之后是10多行的代码：
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
在开始写我们自己的代码之前，值得了解一下这些代码都是做什么用的。
首先，import SwiftUI 告诉 Swift 我们将使用 SwiftUI 框架提供给我们的全部功能。Apple 为我们提供了许多框架，诸如机器学习，音频播放，图像处理等等。相比假定我们将用到所有的功能，我们需要告知 Swift 我们要用到哪些部分，以便提前加载。
其次，struct ContentView: View 创建了一个新的名叫 ContentView 的结构体，这个结构体遵循 View 协议。View 来自 SwiftUI，并且是所有需要被绘制到屏幕的元素都必须适配的基础协议，包括所有的文字，按钮，图像以及其他视图。
第三，var body: some View 定义了一个新的计算属性，名叫 body，它有一个很有趣的类型：some View，这代表着一个遵循 View 协议的类型，但这个额外的 some 关键字同时也添加了一个重要约束： 你必须总是返回相同的类型，不能一会返回一个类型，一会又返回另一个不同的类型。
稍晚些我们会介绍这个特性，不过现在只需要理解它代表“这个属性必须返回某个特定类型的view”。
View 协议只有一个要求，你必须实现一个叫 body 的计算属性，返回 some View。当然，你可以添加更多的属性和方法，但 body 是唯一必须实现的。
第四，Text("Hello World") 创建了一个用字符串“Hello World”构造的文本视图。文本视图是简单的静态文本，必要时会自动对多行文本进行折行。
在 ContentView 结构体的下面，你会看到一个 ContentView_Previews 的结构体，它遵循的是 PreviewProvider 协议。这部分代码并不会成为你的最终app的一部分，它是专供Xcode用来预览你的视图的代码。
这些预览用到了一个叫canvas的XCode特性，通常直接在你代码的右侧可视化呈现。你还可以定制这个canvas的展示方式。
Xcode只能在macOS Catalina或者之后的版本上展示。
提示： 你会经常发现，你代码中的错误会导致canvas的预览停止，你会遇到“Automatic preview updating paused”，你可以点击Resume修复它。如果频繁使用，建议记下快捷键：Option+Cmd+P。
其他知识碎片
在开始项目之前，你还需要学习以下几块知识碎片。
创建Form
增加导航栏
修改程序碎片
绑定状态到UI控件
利用循环创建视图
完成之后，让我们回到这里，继续我们的项目实践。