![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=1738829531-yUU0R8DzqtHB4s4swp1IS8zcVciYVNnT-0-13303f58d178903e31dd9be70022c676)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_1.jpg?sign=1738829531-6mgj0ZLaUAKBGF6MF9AB5y01evhnxWSc-0-b68eb5c165df8dbcc8a4b7f5f5e21e69)
目前的代码实现了设置页面视图中的Header部分,在VStack容器中包含Image和Text,并设置其最大宽度为640点。预览窗口中的效果如图2-44所示。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_2.jpg?sign=1738829531-laO73Hv2v0iDJ5waumFUtgIxzgCqhaNU-0-d9562a6f5c793775865ff3ea27db319d)
图2-44 SettingsView的预览效果
接下来就开始设计表单了,首先在Properties部分添加两个属性。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_3.jpg?sign=1738829531-RPlb0PS24ArQIe62nJD9tGBaxrzyvKtm-0-5eaedbaab507f2c0af24ba686d93e9f2)
在//MARK:-Header部分的下面,我们继续添加下面的代码。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_112_4.jpg?sign=1738829531-dxwLN7G8BqRVxQ23sEs6TGSkhnOyydRU-0-5f6fc6fdf32cdd95681a0af44717b6cc)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_1.jpg?sign=1738829531-jJGjf6C6ewiVrhelv2udmYY3fcav7bCH-0-a0db39078b8a253800c90b3cf8af020c)
在Form表单中,我们使用Section来确定第一部分内容。该部分包含两个开关(Toggle),开关的标题均为Text。注意,这里需要为开关提供被@State封装的变量,并使用$符号作为前缀,这意味着参数是引用传递。
在预览窗口中的效果如图2-45所示。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_2.jpg?sign=1738829531-RvwCSE3iSZA9MXbHO7LMM55nbUbQzrE3-0-7f7066fc61e240ea7b02df11948adbef)
图2-45 SettingsView的预览效果
在//MARK:-第一部分的下面添加下面这段代码。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_113_3.jpg?sign=1738829531-BsIrrRd4V8uMng45VSDMAJvHStaVWmh9-0-2da8822d36eede28b92614ce5ee2e1c4)
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_114_1.jpg?sign=1738829531-PxceaU27gnc5713KfllyOZ7oolWDqU8l-0-eefb3237e69b5e849a330a02d8bb41c4)
这里通过if语句来侦测enableNotification变量,如果为false则只显示一行信息,否则显示应用程序的相关信息。需要特别说明的是,本章我们的学习重点是用户界面的设计与搭建,某些功能并没有真正实现。
在预览窗口中启动Live模式,可以看到如图2-46所示的效果。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_114_2.jpg?sign=1738829531-QwOwrCwwaqkjbcmiTSXyDyRJgZUDbBQV-0-38a1ba09d68def7ccd29c13306418c78)
图2-46 SettingsView的最终效果
现在,我们已经完成了对本章所有内容的学习。本章的重点是使用SwiftUI进行用户界面的设计与搭建,包括利用故事板搭建用户界面的方法;在纵向滚动视图中嵌入横向滚动视图的方法;为项目创建自适应的颜色集和图像集;创建自定义修饰器的方法;为Tab视图创建自定义标签;利用HStack容器和VStack容器进行视图布局的技巧;让应用程序同时支持浅色和深色模式的方法;为用户界面设置微动画效果,以及利用SwiftUI创建表单的方法。