实战教程·元宇宙来了，准备好你的电子名片了吗？（二）（1）

2023-11-03 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 实战教程·元宇宙来了，准备好你的电子名片了吗？（二）

实战教程·元宇宙来了，准备好你的电子名片了吗？（二）

前提回顾

在上一章中，我们创建了CardView构件，使用了构件编程方式搭建视图。使用构件的好处是当我们要整体修改构件内容时，就可以只修改构件的结构体，而无需每个卡片视图都修改。

示例，在上一章中我们设置了平台图标图片，但由于平台图标样式的不统一性，看起来有些不协调。这时候，我们可以给CardView构件中的Image控件设置为圆形，让其更加美观些，如下图所示：

对于搭建好的构件，只需要修改CardView构件本身，就可以在引用此构件的所有地方统一修改其样式。

是不是很方便？接下来让我们继续完成下面的内容。

结构化编程：搭建数据模型

使用构件创建身份卡片视图后，我们发现如果每次要新增一个卡片，就需要在卡片视图中需要复制CardView构件并赋值。当我们需要创建很多身份卡片时，就会需要很多一样的代码，这不够优雅。

有没有办法像搭建CardView构件一样，只搭建一个结构然后填充数据，让结构自动“遍历”出内容？

SwiftUI声明式语言中，可以使用List列表组件循环遍历内容，在此之前我们需要定义好数据模型。我们创建一个新的Swift文件，命名为Model，如下图所示：

Model文件作为我们搭建数据模型的文件，定义数据需要声明的变量。首先我们引用SwiftUI，如下代码所示：

import SwiftUI
接下来搭建数据模型，如下代码所示：
javascript
复制代码
struct Model: Identifiable {
    var id = UUID()
    var platformIcon: String
    var title: String
    var platformName: String
    var indexURL: String
}

数据模型可以使用Class类或者Struct结构体声明，这里我们使用Struct结构体声明了一个数据模型Model，遵循Identifiable协议。“Identifiable可识别”协议可以通过id区分不同的数据，当我们创建的数据中有两条一模一样的数据时，由于“Identifiable可识别”协议，系统将赋予不同的id，实现呈现两条数据内容的效果。

使用Identifiable协议除了声明需要的参数变量外，还需要在数据模型中声明一个id，并复制为UUID。该数据模型中的需要使用的变量参数，我们可以直接使用之前在CardView身份卡片构件声明的参数。

声明好参数后，我们为展示数据，可以创建一个数据数组作为示例数据，如下代码所示：

// MARK: 示例数据
var models = [
    Model(platformIcon: "icon_juejin", title: "移动端签约作者", platformName: "稀土掘金技术社区", indexURL: "https://juejin.cn/user/3897092103223517"),
    Model(platformIcon: "icon_csdn", title: "iOS创作者", platformName: "CSDN博客", indexURL: ""),
    Model(platformIcon: "icon_aliyun", title: "专家博主", platformName: "阿里云社区", indexURL: ""),
    Model(platformIcon: "icon_huaweiyun", title: "专家博主", platformName: "华为云社区", indexURL: ""),
]

如此便完成了数据模型的搭建。

卡片视图：List列表和ForEach循环

我们回到ContentView视图中，删除原有的身份卡片视图的代码。卡片视图我们可以看作一个列表，每张身份卡片就是一行行呈现的数据，列表的数据源则来源于上述创建好的数组models，如下图所示：

List {
    ForEach(models) { item in
    CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL)
  }
    .listRowBackground(Color.clear)
    .listRowSeparator(.hidden)
}