- SwiftUI自学成长笔记
- 刘铭等
- 438字
- 2025-03-01 05:32:24
1.4 循环生成多张卡片视图
本节,我们将通过ForEach循环语句生成多个同样的视图。这一过程非常简单,只需通过下面几行代码就可以完美实现。

我们先在CardView的外层嵌套一个HStack容器,设置该容器的对齐方式为中心对齐,每个视图元素的横向间隔距离为20点,之后我们会将其余的6张卡片放到这个容器中。再对容器添加padding修饰器,让它的边缘与父视图有20点的间隔距离。
为了实现横向滚动效果,在HStack容器的外层还要嵌套一个滚动视图(Scroll View),这里指定滚动方式为横向,不显示滚动条。
继续编写代码,在HStack容器的内容中添加循环语句。

因为最终要显示7位不同职位的人物资料,所以先手动指定循环生成7张卡片,在预览窗口中的效果如图1-22所示。
还记得之前我们定义Button的时候,在action参数中定义的“print("按钮被用户单击")”的语句吗?为了确定用户单击按钮以后是否有效,可以在模拟器中运行该项目,然后单击卡片中的按钮,此时会在Xcode底部的调试控制台中显示“按钮被用户单击”的文本信息,如图1-23所示。

图1-22 利用循环在ContentView中生成多个卡片视图

图1-23 在模拟器中测试按钮被单击后的效果