本文价值与收获

看完本文后，您将能够作出下面的界面

Jietu20200420-164644.gif

看完本文您将掌握的技能

Form基础使用
融合TextField
使用枚举类型enum
掌握Toggle使用

凭借对声明式用户界面的优势，SwiftUI为我们提供了一种构建表单的绝妙机制Form，从而解决了我们收集信息基础需求。

SwiftUI的Form帮我们解决了多控件的综合使用问题。虽然我们可以自己搭建表单界面，但是需要处理很多繁琐的自适应和布局问题，Form可以与输入、标签、按钮等控件更好地协同工作。

如果陷入再复杂界面布局中，那么您一定会喜欢上Form。SwiftUI可以动态地调整布局，使其可以根据您的代码在哪个平台上为我们自动创建全新的屏幕，从而完全消除了从视觉上的不协调。这意味着我们描述了我们想要的东西，而SwiftUI找出了使之在当前平台上实现的惯用方式。

表单是常规容器，就像VStack一样，因此您可以根据自己的目的在两者之间自由切换。

实战应用

下面我们制作一个可以用户注册界面，该界面可以实现用户名、密码和邮箱的采集工作。

第一步，我们创建个项目

项目创建请参考，《SwiftUI零基础之开发第一步创建个项目》

第二步，界面搭建

1、创建三个@State变量

struct ContentView : View {

    @State private var name: String = ""
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        Text("Hello World!")
    }
}

用大白话讲，@State就是一个标签，贴之前视图是不可以修改这个值;贴了之后，只要你修改这变量，界面就会跟着同步修改。这个是现代界面语言都是支持的特性。更多State介绍请参考《SwiftUI 基础之@State 有什么用》

2、增加导航条

struct ContentView : View {

    @State private var name: String = ""
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        NavigationView {
            Form {
                Text("Hello World!")
            }
            .navigationBarTitle(Text("注册界面"))
        }
    }
}

image.png

如您所见，form会自动创建一个list，list中的每个view都将是一个单元格，就像此处的文本“ Hello World！”一样。

在此表单中，我们将删除Hello World，而是添加一些实际代码。界面将分为三个部分。我们将其中一个用于name和email字段，另一个用于密码，最后一个用于数据校验与提交。

Section有3个参数：页眉，页脚和内容（视图）。在这里，我们将为我们的前两个部分设置标题：

SwiftUI实战之form制作登录界面