本文价值与收获
看完本文后,您将能够作出下面的界面
Jietu20200420-164611@2x.jpg
Jietu20200420-164644.gif
看完本文您将掌握的技能
Form基础使用
融合TextField
使用枚举类型enum
掌握Toggle使用
凭借对声明式用户界面的优势,SwiftUI为我们提供了一种构建表单的绝妙机制Form,从而解决了我们收集信息基础需求。
SwiftUI的Form帮我们解决了多控件的综合使用问题。虽然我们可以自己搭建表单界面,但是需要处理很多繁琐的自适应和布局问题,Form可以与输入、标签、按钮等控件更好地协同工作。
如果陷入再复杂界面布局中,那么您一定会喜欢上Form。SwiftUI可以动态地调整布局,使其可以根据您的代码在哪个平台上为我们自动创建全新的屏幕,从而完全消除了从视觉上的不协调。这意味着我们描述了我们想要的东西,而SwiftUI找出了使之在当前平台上实现的惯用方式。
表单是常规容器,就像VStack一样,因此您可以根据自己的目的在两者之间自由切换。
实战应用
下面我们制作一个可以用户注册界面,该界面可以实现用户名、密码和邮箱的采集工作。
第一步,我们创建个项目
第二步,界面搭建
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个参数:页眉,页脚和内容(视图)。在这里,我们将为我们的前两个部分设置标题: