![SwiftUI自学成长笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/983/41202983/b_41202983.jpg)
2.7 使用SwiftUI设计表单
除了使用SwiftUI设计常规的用户界面,我们还可以通过用它设计表单来收集相关的信息,比如用户的订单、购物车等。本节,我们将创建一个最基础的表单,实现简单的交互操作。
打开SettingsView,将Body部分的代码修改为下面这样。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_111_2.jpg?sign=1739297985-JenoFjh09Ev2cUmIC92Sx1uor19aGl3l-0-5d3b73d3172df4c699fc278e508c6c2d)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_1.jpg?sign=1739297985-AzpDXDBrnKbsZFitW866vdlh8Um7IqZz-0-f6b4252bf1bf65009c01e057908aa5ba)
目前的代码实现了设置页面视图中的Header部分,在VStack容器中包含Image和Text,并设置其最大宽度为640点。预览窗口中的效果如图2-44所示。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_2.jpg?sign=1739297985-eyvgpjCRGlb8oeTFtPaMwNQsbpSYafop-0-19ccf0ad00916f7ba79ba69e9bd60232)
图2-44 SettingsView的预览效果
接下来就开始设计表单了,首先在Properties部分添加两个属性。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_3.jpg?sign=1739297985-ctLT1kPavfWr29rsgjwv3SBqFnNrJIdU-0-6819825e34ecc0bd6291775a7e8281d2)
在//MARK:-Header部分的下面,我们继续添加下面的代码。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_4.jpg?sign=1739297985-fl3EaMqhss0iIQmXebL5sapxldOg3D2u-0-647ba5844690a23568219a7b47628351)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_1.jpg?sign=1739297985-EnY7ucrDpPasyAUEpFQy2GaGlUfU0RHZ-0-00dd35105b4ee34268a723483f8a5237)
在Form表单中,我们使用Section来确定第一部分内容。该部分包含两个开关(Toggle),开关的标题均为Text。注意,这里需要为开关提供被@State封装的变量,并使用$符号作为前缀,这意味着参数是引用传递。
在预览窗口中的效果如图2-45所示。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_2.jpg?sign=1739297985-x80tIpWTz2IK9N7KxSMEiv3BFcAafkUO-0-411863f4a459dfadb7f82157c674c507)
图2-45 SettingsView的预览效果
在//MARK:-第一部分的下面添加下面这段代码。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_3.jpg?sign=1739297985-xqfOcflg9iNFgO1zLMqRMMYu7myiNfT3-0-44a9b39ef04bfe720dbe7f3ce518c407)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_114_1.jpg?sign=1739297985-frCJGSOTF1U4EhPwNa8XArV67Dx6ChtZ-0-11eaf5a8a60ae57af73259d445f76112)
这里通过if语句来侦测enableNotification变量,如果为false则只显示一行信息,否则显示应用程序的相关信息。需要特别说明的是,本章我们的学习重点是用户界面的设计与搭建,某些功能并没有真正实现。
在预览窗口中启动Live模式,可以看到如图2-46所示的效果。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_114_2.jpg?sign=1739297985-aOrrp1yzCw8iFJtQI1mWNkYFlyKaBzSu-0-85f044ce4e5d2ad77e50f7d85a90bf82)
图2-46 SettingsView的最终效果
现在,我们已经完成了对本章所有内容的学习。本章的重点是使用SwiftUI进行用户界面的设计与搭建,包括利用故事板搭建用户界面的方法;在纵向滚动视图中嵌入横向滚动视图的方法;为项目创建自适应的颜色集和图像集;创建自定义修饰器的方法;为Tab视图创建自定义标签;利用HStack容器和VStack容器进行视图布局的技巧;让应用程序同时支持浅色和深色模式的方法;为用户界面设置微动画效果,以及利用SwiftUI创建表单的方法。