前言：这个专题已经写了半个月了，累计更新15个章节，接近4W字+，在这里打个卡先。
今日职言：永远不要说别人的坏话。
在本章中，你将学会使用Form构建简单的表单，并同步学习Picker选择器、Toggle开关、Stepper步进器等简单组件的使用。
在iOS应用中，特别是待办事项、笔记类App，B端App用户注册、账号登录等页面，我们常常可以看到需要用户填写的表单。
在系统设置中，我们也可以看到由Form表单构建的页面：
在之前的章节中，我们使用List构建了简单的列表，那么List构建列表和Form构建表单有什么异同点呢？
相同点：List列表和Form表单都是SwiftUI对UITableView的一个封装，在实现的机理基本上是一样的。
不同点：Form比较List，样式只有一，List 可以有几种样式，List上可以直接使用快捷数据源遍历，Form需要配合ForEach才能达到相同的效果。
本章节将分成4个部分讲解。
1、构建简答的Form表单；
2、Toggle开关；
3、Picker选择器；
4、Stepper步进器；
那么，让我们开始吧！
第一部分：构建简答的Form表单
首先，我们先创建一个新项目，命名为SwiftUIForm。
我们以iPhone的系统设置页面为例，尝试完成下面的页面：
首先我们先做一个标题，这里使用NavigationView，当然还有居中的标题。
NavigationView {
//内容
Text("Hello, world!")
.padding()
//导航栏标题
.navigationBarTitle("通用", displayMode: .inline)
}
Form表单的用法和List基本一致，用Form将需要展示的内容包裹起来。
Form的基础用法：
Form {
Section() {
//需要展示的内容
Section是分段的意思，一个Section代表一个段落。
我们使用Form表单将文字内容包裹起来，看看效果。
就这样，我们得到了一个有一个段落的表单内容。
那么我们和UI稿一样，分成几个Section段落，然后也同步修改Text的文字内容。
于是我们就得到了系统设置基本一致的页面。
就这样，我们完成了一个基础Form的创建。
是不是很简单。
再科普一个知识点，像下面“自动更新”的页面，我们发现在整个Section段落后有“跟随”的文字。
这个可不是用Text加到body外面，而是可以通过Section段落自己的参数设置的。
Section段落可以设置它的表头文字，和表尾文字。
设置的方法如下：
Section(header: Text(“我是表头文字”),footer: Text(“我是表尾文字”)) {
//需要展示的内容
}
这里我们只用到了Section段落尾巴的文字。
那可以只使用footer，删掉整个header内容。
代码如下：
// 表单
Form {
Section(footer: Text("下载后在夜间自动安装软件更新。更新安装前您会收到通知。iPhone 必须为充电状态并接入 Wi-Fi以完成更新。")) {
// 需要展示的内容
Text("下载iOS更新")
Text("安装iOS更新")
}
}
第二部分：Toggle开关
承接上面第一部分的内容。
在自动更新的页面，我们可以看到Text("下载iOS更新”)、Text("安装iOS更新")右边都有一个开关。
Toggle开关的创建方法也很简单，首先我们需要初始化定义Toggle开关的状态，默认为关闭false。
@State var isDownload = false //是否下载
@State var isInstall = false //是否安装
然后是Section段落里每一个文字都有一个开关，我们将Toggle包裹住Text。
同时要绑定开关的状态。
Toggle(isOn: $isDownload) {
Text("下载iOS更新")
}
Toggle(isOn: $isInstall) {
Text("安装iOS更新")
}于是乎，我们就完成了Toggle开关的创建。
点击模拟器的Preview按钮，点击下开关，可以发现我们实现了开关的切换了。
第三部分：Picker选择器
在使用Form表单的时候，特别是在B端的App，经常会遇到一个业务场景。
用户在设置的时候，需要修改一项配置。
以下图iOS的隔空投送为例：
我们先完成基础的页面样式。
完整代码如下：
NavigationView {
// 表单
Form {
Section {
Text("隔空投送")
}
}
// 导航栏标题
.navigationBarTitle("通用", displayMode: .inline)
}
下面，我们分析下内容：
点击隔空投送，我们进入一个新页面，可以选择“接收关闭”、“仅限联系人”、“所有人”。
这里，我们就可以使用Picker选择器来完成这个操作。
首先，我们需要先定义好需要可选项的内容，我们用一个私有private的数组displayState来表示。
private var displayState = [ "接收关闭", "仅限联系人", "所有人"]
数组的名称可以自定义，这里用的displayState是“显示状态”的意思。
当然，数组是开放使用public公开的，还是private私有的，根据实际业务来定。
我们还需要声明一个状态变量来存储用户选择的选项。
@State private var selectedNumber = 0
这里的0，代表的是选中的第一个选项。
如果displayState数组是三个可选项，那么它的选择对应的是0、1、2。
接下来，我们尝试构建Picker选择器，代码如下：
Picker(selection: $selectedNumber, label: Text("隔空投送")) {
//选择器可选项内容
点击模拟器的Preview按钮，我们可以体验到选择器的效果。
点击“隔空投送”，会进入一个新页面。
但我们看到页面里面是空的，这是因为Picker选择器选择的内容我们还没有构建。
在之前我们已经定一个一个状态的数组displayState。
private var displayState = [ "接收关闭", "仅限联系人", "所有人"]
接下来我们需要在Picker选择器选择的内容里遍历出内容来。
遍历数组内容的方法我们可以用之前学习过的ForEach循环的方法。
遍历数组数据为0～displayState数组内数组的数量count，id使用数组本身，文字展示使用$绑定数组值；
//选择器可选项内容
ForEach(0 ..< displayState.count, id: \.self) {
Text(self.displayState[$0])
}
运行模拟器看看，我们已经实现了Picker选择器的效果。
完整代码如下：
import SwiftUI
struct ContentView: View {
private var displayState = [ "接收关闭", "仅限联系人", "所有人"]
@State private var selectedNumber = 0
var body: some View {
NavigationView {
// 表单
Form {
Section {
Picker(selection: $selectedNumber, label: Text("隔空投送")) {
//选择器可选项内容
ForEach(0 ..< displayState.count, id: \.self) {
Text(self.displayState[$0])
}
}
}
}
// 导航栏标题
.navigationBarTitle("通用", displayMode: .inline)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
第四部分：Stepper步进器
下面我们再学习一种在Form表单中很常见使用的组件，叫做Stepper步进器。
可能我们最常见到它应该是在一些电商平台上，或者外卖平台。
我们选中一个商品加入购物车中，此时的商品数量为1件，我们通过点击增加或者减少按钮，来修改商品数量。
这个点击增加和减少的操作，在swiftui中，就是Stepper步进器。
首先，我们需要定义一个Stepper步进器初始值，比如从1开始。
@State private var amount = 1
然后承接上面Picker选择器的内容，我们再建立一个Section段落，用来放置Stepper步进器代码。
//构建步进器
Stepper(onIncrement: {
//点击+号时做什么操作
}, onDecrement: {
//点击-号时做什么操作
}) {
//步进器内容部分
我们简单给Stepper步进器写一些逻辑：
Stepper步进器初始值为1；
当我们点击”+”时，amount数值+1；
然后设置最大值为99，超过99，就不能再加了；
当我们点击”-“时，amount数值-1；
然后设置最小值为1，小于1，就不能再减少了；
实现代码如下：
//步进器
Stepper(onIncrement: {
self.amount += 1
if self.amount > 99 {
self.amount = 99
}
}, onDecrement: {
self.amount -= 1
if self.amount < 1 {
self.amount = 1
}
}) {
//步进器文字
Text("\(amount)")
}
恭喜你！完成了本章关于Form表单的学习！
内容可能有点多，需要点时间吸收。
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
