SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Fo-灵析社区

前言：

这个专题已经写了半个月了，累计更新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表单的学习！

内容可能有点多，需要点时间吸收。

快来动手试试吧！

如果本专栏对你有帮助，不妨点赞、评论、关注～