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

需求背景

自从在技术论坛开始写作后，会遇到来自不同领域不同平台的朋友加为好友。后来人数多了以后，对于相同社区的朋友为了方便管理就建立了微信群进行管理。由于在不同平台的内容更新频次不同，会被经常问起在哪些平台进行更新，但通常会因为一时间平台很多也不知道该如何回答。

有时候在想是不是能有一个工具能够像个人简历一样，汇集个人的所有公开的信息，其他人只需要通过一个链接就可以查看我所有共享的内容？

在网上查询了一圈后，还真发现了一款叫做Linktree的工具，它通过在创建一个有效的链接的方式，将个人的一个个身份汇集在一起。用户可以将这个链接分享给其他人，其他人就可以通过访问URL来查询他人共享的所有社交媒体资料和内容。

这是不是就是所谓的元宇宙世界的电子名片？

秉着研究的兴趣，结合自己所学的内容，也想着是否能使用SwiftUI实现一个电子名片？说干就干。

项目分析

做一款电子名片的MVP产品，功能点分析如下：

我们将项目命名为Linkworld，它有两个页面，一个“个人主页”，承载用户创建的所有身份卡片。第二个是“新建身份页”，用户创建个人主页中的身份卡片。

Linkworld唯有一个核心的功能，即点击卡片后在应用内打开web网页，跳转到身份卡片对应的主页。

在分析完最小的MVP产品的核心功能后，我们来使用编程实现这款App。

项目准备：创建新的SwiftUI项目

首先打开Xcode，创建一个新的SwiftUI项目，命名为Linkworld，如下图所示：

编程方式：搭建单独的构件

创建项目后，先来分析个人主页所需要呈现的内容，我们设想每一个社交媒体都是一个身份卡片，就像医生或者服务员胸口的名片。

Swift编程语言的一大特性是归类的思想，即将具有相同的特性的内容抽离出来，制作一个个构件，然后在主要视图中调用。一张张身份卡片对于我们来说就是一个构件，我们只需要创建一个标准构件，然后赋予不同的内容就可以完成主页的搭建。

在ContentView中，我们创建一个新的结构体作为标准构件，如下代码所示：

// MARK: 身份卡片构件

struct CardView: View {
    var body: some View {
        Text("Hello, world!")
    }
}
复制代码

为了便于展示，我们在ContentView文件中创建了一个新的结构体CardView，当然我们也可以直接创建一个新的SwiftUI文件命名为CardView。一般在编程过程中，为了项目结构的清晰，通常会另起一个SwiftUI页面，这里为了演示内容，就在ContentView直接创建。

变量声明：变量名称和变量类型

创建完CardView结构体后，我们来分析下身份卡片需要呈现的内容，如下图所示：

借鉴一些常规技术社区所呈现的主要内容，我们可以得到单张身份卡片应该有如上图的信息：平台图标、平台称号、平台名称、跳转链接。

示例：稀土掘金Icon，移动端签约作者，稀土掘金技术社区，juejin.cn/user/389709…

因此对于CardView视图，需要声明对应的参数，如下代码所示：

var platformIcon: String
var title: String
var platformName: String
var indexURL: String
复制代码

上述代码中，我们声明了4个身份卡片所需要的参数：platformIcon平台图标、title平台称号、platformName平台名称、indexURL首页地址。

这里需要明确的内容是，使用var声明的变量需要确定参数的类型，参数类型需要根据使用的组件使用的类型。Image图片组件、Text文字组件使用的参数值都是String类型，因此我们声明的4个必要的变量也都是String类型。

界面设计：控件的三种布局容器

紧接着，我们来看看单张身份卡片的设计结构，如下图所示：

由上图所示，单张身份卡片需要展示的内容的布局结构，平台称号和平台名称为垂直排列，信息和平台平台图标为横向排列。

编程方式我们可以先搭建布局容器，再搭建控件内容，也可以先搭建控件内容，再在控件内容外层搭建容器，在SwiftUI实际编程中均可使用两种方式。

首先是平台图标，如下代码所示：

// 平台图标
Image(platformIcon)
	.resizable()
	.aspectRatio(contentMode: .fit)
	.frame(maxWidth: 48, maxHeight: 48)
复制代码

上述代码中，我们使用Image图片控件搭建平台图标展示的内容，使用的控件内容为声明的参数变量platformIcon，为了调整平台图标以达到最佳的展示效果，这里使用resizable可调整尺寸修饰符、aspectRatio保持宽高比修饰符、frame设置尺寸修饰符，将平台图标的Image图片控件调整为一个48*48的图片。

然后是文字部分，由于平台图标图片和文字信息（平台称号、平台名称）为横向排布方式，因此需要在它们的最外层增加一个HStack横向布局容器，告知系统这些控件是横向排布，如下代码所示：

HStack(spacing: 15) {
	// 平台图标
	Image(platformIcon)
		.resizable()
		.aspectRatio(contentMode: .fit)
		.frame(maxWidth: 48, maxHeight: 48)

	Spacer()
}
复制代码

上述代码中，我们使用HStack横向布局容器包裹Image图片控件，在HStack横向布局容器中，我们还使用Spacer控件，Spacer控件可以填充空白区域，如此便可以将Image图片控件“挤”到另一边。

文字信息（平台称号、平台名称）部分，使用两个不同字号大小的Text控件，而这两个Text控件为纵向排布方式，我们需要使用到VStack纵向布局容器，如下代码所示：

VStack(alignment: .leading, spacing: 5) {
	// 平台称号
	Text(title)
		.font(.system(size: 18))
		.fontWeight(.bold)

	// 平台名称
	Text(platformName)
		.font(.system(size: 14))
}
复制代码

上述代码中，VStack纵向布局容器使用对齐方式设置为leading文字左对齐，内容控件之间的spacing间距为5。文字信息部分，使用font字体修饰符设置平台称号的字号为18，文字字重加粗，平台名称的字号为14。

最后，由于我们需要身份卡片呈现卡片效果，因此在整个视图最外层进行修饰，将整个视图内容“美化”成卡片，如下代码所示：

HStack(spacing: 15) {
	// 平台图标
	Image(platformIcon)
		.resizable()
		.aspectRatio(contentMode: .fit)
		.frame(maxWidth: 48, maxHeight: 48)

	VStack(alignment: .leading, spacing: 5) {
				// 平台称号
				Text(title)
					.font(.system(size: 18))
					.fontWeight(.bold)

				// 平台名称
				Text(platformName)
					.font(.system(size: 14))
			}

	Spacer()
}
.padding()
.frame(maxHeight: 80)
.background(.white)
.cornerRadius(8)
.padding(.horizontal)
复制代码

以上，单张身份卡片的构件就完成了。

卡片预览：使用构件搭建视图

完成单张身份卡片的构件后，我们在ContentView视图中展示卡片看看效果。首先我们先在Assets导入一堆图片素材作为平台图标的内容，如下图所示：

然后回到ContentView文件中，删除示例代码，调用CardView身份卡片结构体创建列表，如下代码所示：

CardView(platformIcon: "icon_juejin", title: "移动端签约作者", platformName: "稀土掘金技术社区", indexURL: "https://juejin.cn/user/3897092103223517")
复制代码

上述代码中，我们在Body中调用CardView构件，并给声明的参数赋值。

由于身份卡片背景颜色为white白色，因此在白色背景颜色看不到卡片效果，我们可以填充一个带有颜色的背景，以便于突出白色卡片，如下代码所示：

ZStack {
    Color(red: 246 / 255, green: 247 / 255, blue: 255 / 255)
        .edgesIgnoringSafeArea(.all)

    CardView(platformIcon: "icon_juejin", title: "移动端签约作者", platformName: "稀土掘金技术社区", indexURL: "https://juejin.cn/user/3897092103223517")
}
复制代码

上述代码中，使用ZStack堆栈视图容器将CardView和Color颜色进行堆栈叠加，实现颜色叠加效果。Color颜色部分，使用edgesIgnoringSafeArea忽略安全边界修饰符修饰，将颜色填充整个页面。

这里值得注意的是，堆栈视图中的控件的先后顺序决定了堆栈的层级，Color颜色在前，CardVIew视图在后，便实现了Color颜色作为背景颜色。

我们创建多几个卡片看看效果，如下图所示：

项目小结

至此，电子名片的基础卡片内容就已完成基础的部分了。

在本章中，我们学习了如何使用布局容器创建界面样式，包括HStack横向布局容器、VStack纵向布局容器、ZStack堆栈布局容器，并实现这些容器进行控件之间的布局，达到整理页面元素的效果。以及还学习了一个新的控件Spacer填充空间控件，常用于配合布局容器填充空白的空间。

而本章的重点是了解如何使用“构件”这一编程方式，这一编程方式在实际开发中经常会使用，可以有效地减少和规范代码。

下一章，我们继续来学习如何创建数据模型来进一步完善这个项目，请保持期待吧～

版权声明

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！