实战教程·元宇宙来了，准备好你的电子名片了吗？（一） 需求背景自从在技术论坛开始写作后，会遇到来自不同领域不同平台的朋友加为好友。后来人数多了以后，对于相同社区的朋友为了方便管理就建立了微信群进行管理。由于在不同平台的内容更新频次不同，会被经常问起在哪些平台进行更新，但通常会因为一时间平台很多也不知道该如何回答。 有时候在想是不是能有一个工具能够像个人简历一样，汇集个人的所有公开的信息，其他人只需要通过一个链接就可以查看我所有共享的内容？ 在网上查询了一圈后，还真发现了一款叫做Linktree的工具，它通过在创建一个有效的链接的方式，将个人的一个个身份汇集在一起。用户可以将这个链接分享给其他人，其他人就可以通过访问URL来查询他人共享的所有社交媒体资料和内容。 这是不是就是所谓的元宇宙世界的电子名片？ 秉着研究的兴趣，结合自己所学的内容，也想着是否能使用SwiftUI实现一个电子名片？说干就干。 项目分析做一款电子名片的MVP产品，功能点分析如下： 我们将项目命名为Linkworld，它有两个页面，一个“个人主页”，承载用户创建的所有身份卡片。第二个是“新建身份页”，用户创建个人主页中的身份卡片。 Linkworld唯有一个核心的功能，即点击卡片后在应用内打开web网页，跳转到身份卡片对应的主页。 在分析完最小的MVP产品的核心功能后，我们来使用编程实现这款App。 项目准备：创建新的SwiftUI项目首先打开Xcode，创建一个新的SwiftUI项目，命名为Linkworld，如下图所示： 编程方式：搭建单独的构件创建项目后，先来分析个人主页所需要呈现的内容，我们设想每一个社交媒体都是一个身份卡片，就像医生或者服务员胸口的名片。 Swift编程语言的一大特性是归类的思想，即将具有相同的特性的内容抽离出来，制作一个个构件，然后在主要视图中调用。一张张身份卡片对于我们来说就是一个构件，我们只需要创建一个标准构件，然后赋予不同的内容就可以完成主页的搭建。 在ContentView中，我们创建一个新的结构体作为标准构件，如下代码所示： //MARK:身份卡片构件 structCardView:View{ varbody:someView{ Text("Hello,world!") } } 为了便于展示，我们在ContentView文件中创建了一个新的结构体CardView，当然我们也可以直接创建一个新的SwiftUI文件命名为CardView。一般在编程过程中，为了项目结构的清晰，通常会另起一个SwiftUI页面，这里为了演示内容，就在ContentView直接创建。 变量声明：变量名称和变量类型创建完CardView结构体后，我们来分析下身份卡片需要呈现的内容，如下图所示： 借鉴一些常规技术社区所呈现的主要内容，我们可以得到单张身份卡片应该有如上图的信息：平台图标、平台称号、平台名称、跳转链接。 示例：稀土掘金Icon，移动端签约作者，稀土掘金技术社区，https://juejin.cn/user/3897092103223517 因此对于CardView视图，需要声明对应的参数，如下代码所示： varplatformIcon:String vartitle:String varplatformName:String varindexURL: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天后未获授权禁止转载，侵权必究！ 阅读原文