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

需求布景

自从在技能论坛开端写作后，会遇到来自不同范畴不同渠道的朋友加为好友。后来人数多了今后，关于相同社区的朋友为了便利办理就建立了微信群进行办理。因为在不同渠道的内容更新频次不同，会被常常问起在哪些渠道进行更新，但通常会因为一时间渠道许多也不知道该怎么回答。

有时候在想是不是能有一个工具能够像个人简历一样，聚集个人的所有揭露的信息，其他人只需求经过一个链接就能够查看我所有同享的内容？

在网上查询了一圈后，还真发现了一款叫做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，移动端签约作者，稀土技能社区，/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:///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:///user/3897092103223517")
}

上述代码中，运用ZStack仓库视图容器将CardView和Color色彩进行仓库叠加，完结色彩叠加作用。Color色彩部分，运用edgesIgnoringSafeArea忽略安全鸿沟润饰符润饰，将色彩填充整个页面。

这儿值得注意的是，仓库视图中的控件的先后顺序决定了仓库的层级，Color色彩在前，CardVIew视图在后，便完结了Color色彩作为布景色彩。

咱们创立多几个卡片看看作用，如下图所示：

项目小结

至此，电子名片的根底卡片内容就已完结根底的部分了。

在本章中，咱们学习了怎么运用布局容器创立界面样式，包括HStack横向布局容器、VStack纵向布局容器、ZStack仓库布局容器，并完结这些容器进行控件之间的布局，到达收拾页面元素的作用。以及还学习了一个新的控件Spacer填充空间控件，常用于配合布局容器填充空白的空间。

而本章的重点是了解怎么运用“构件”这一编程方法，这一编程方法在实践开发中常常会运用，能够有效地削减和规范代码。

下一章，咱们持续来学习怎么创立数据模型来进一步完善这个项目，请坚持期待吧～

版权声明

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