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 在模拟器中测试按钮被单击后的效果