- SwiftUI自学成长笔记
- 刘铭等
- 438字
- 2021-11-03 13:34:44
1.4 循环生成多张卡片视图
本节,我们将通过ForEach循环语句生成多个同样的视图。这一过程非常简单,只需通过下面几行代码就可以完美实现。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_37_1.jpg?sign=1739590487-NCccEif8lEigAzO6ti0MOnrr0vBDryzm-0-bbaf7fbf6f2bfe9cd6d8b5f1477a9844)
我们先在CardView的外层嵌套一个HStack容器,设置该容器的对齐方式为中心对齐,每个视图元素的横向间隔距离为20点,之后我们会将其余的6张卡片放到这个容器中。再对容器添加padding修饰器,让它的边缘与父视图有20点的间隔距离。
为了实现横向滚动效果,在HStack容器的外层还要嵌套一个滚动视图(Scroll View),这里指定滚动方式为横向,不显示滚动条。
继续编写代码,在HStack容器的内容中添加循环语句。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_37_2.jpg?sign=1739590487-NMNoa0HxPIKDQa33DnRN56OLyIVhm7Zu-0-182616061cd87ae346c656662852b762)
因为最终要显示7位不同职位的人物资料,所以先手动指定循环生成7张卡片,在预览窗口中的效果如图1-22所示。
还记得之前我们定义Button的时候,在action参数中定义的“print("按钮被用户单击")”的语句吗?为了确定用户单击按钮以后是否有效,可以在模拟器中运行该项目,然后单击卡片中的按钮,此时会在Xcode底部的调试控制台中显示“按钮被用户单击”的文本信息,如图1-23所示。
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_38_1.jpg?sign=1739590487-AZcDx0x7vUtMA7yveG7Ij4BbITwAoAkC-0-5af372a247a4b9d1e39bf2df67a9e7c8)
图1-22 利用循环在ContentView中生成多个卡片视图
![](https://epubservercos.yuewen.com/CE38D5/21440188008281406/epubprivate/OEBPS/Images/41822_38_2.jpg?sign=1739590487-TgRnvojgOVrPvdrhyDN1x93WYzf3Jci3-0-58165f7e80d0cc02b329627bc6af6390)
图1-23 在模拟器中测试按钮被单击后的效果