编程方式:搭建单独的构件
创建项目后,先来分析个人主页所需要呈现的内容,我们设想每一个社交媒体都是一个身份卡片,就像医生或者服务员胸口的名片。
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类型。