实战教程·元宇宙来了,准备好你的电子名片了吗?(一)(2)

简介: 实战教程·元宇宙来了,准备好你的电子名片了吗?(一)

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

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

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

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

// MARK: 身份卡片构件
struct CardView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

image.png

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

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

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

image.png

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

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

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

var platformIcon: String
var title: String
var platformName: String
var indexURL: String

image.png

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

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


相关文章
|
存储 JSON 缓存
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
实战教程·元宇宙来了,准备好你的电子名片了吗?
79 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(1)
|
存储 XML Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
74 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(2)
|
存储 JSON 测试技术
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
52 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(五)(2)
|
存储 前端开发 数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
60 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(6)
|
数据库
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
51 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(4)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
50 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(八)(5)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
59 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(2)
|
程序员 人机交互 Swift
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
67 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(六)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
61 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(七)(2)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
55 0
实战教程·元宇宙来了,准备好你的电子名片了吗?(四)(3)