实战教程·元宇宙来了,准备好你的电子名片了吗?(三)
前提回顾
在上两个章节中,我们完成了个人主页以及添加身份卡页面的设计,其中学习如何数据模型、列表创建卡片展示视图,以及打开页面和关闭页面的交互动作,在本章节中,我们来学习搭建添加身份卡页面的相关内容。
界面分析:页面元素及其优先级
添加身份卡页面,需要根据个人主页身份卡的内容来构建,身份卡对应展示的信息,就是我们需要在新增时创建的信息,如下图所示:
对于信息的优先级,主要信息为平台称号,其次信息是平台图标和平台名称,再次隐藏信息是链接地址。
确定页面元素的优先级需要遵循用户惯性逻辑以及应用想给用户呈现的关键点,在身份卡中对于用户而言最核心的信息是在平台所取得的称号,而平台称号也是在个人主页身份卡中用户视线首要关注的内容。
其次的平台信息部分,由平台图标和平台名称组成,这是由于这两块信息具有相关性,平台名称对应着平台图标,因此在产品设计上可以耦合在一起。
最后是链接地址部分,后续我们希望关联对应平台地址后,能点击身份卡片在应用内打开浏览器并访问链接地址,而链接地址在整个身份卡片中是不展示其内容的,因此信息的优先级可以放置至最后。
变量声明:身份卡必要参数准备
分析完界面元素后,我们在创建页面之前先确定好需要使用到的变量,如下代码所示:
@State var platformIcon: String = "icon_juejin" @State var title: String = "移动端签约作者" @State var platformName: String = "稀土掘金技术社区" @State var indexURL: String = "https://juejin.cn/user/3897092103223517"
上述代码中,我们都使用@State进行变量的声明,@State可以存储声明的变量及其变量的值。并且为了呈现效果,我们给声明的参数都赋予了初始值。