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

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

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


前提回顾

在上两个章节中,我们完成了个人主页以及添加身份卡页面的设计,其中学习如何数据模型、列表创建卡片展示视图,以及打开页面和关闭页面的交互动作,在本章节中,我们来学习搭建添加身份卡页面的相关内容。

界面分析:页面元素及其优先级

添加身份卡页面,需要根据个人主页身份卡的内容来构建,身份卡对应展示的信息,就是我们需要在新增时创建的信息,如下图所示:

image.png

对于信息的优先级,主要信息为平台称号,其次信息是平台图标和平台名称,再次隐藏信息是链接地址。

确定页面元素的优先级需要遵循用户惯性逻辑以及应用想给用户呈现的关键点,在身份卡中对于用户而言最核心的信息是在平台所取得的称号,而平台称号也是在个人主页身份卡中用户视线首要关注的内容。

其次的平台信息部分,由平台图标和平台名称组成,这是由于这两块信息具有相关性,平台名称对应着平台图标,因此在产品设计上可以耦合在一起。

最后是链接地址部分,后续我们希望关联对应平台地址后,能点击身份卡片在应用内打开浏览器并访问链接地址,而链接地址在整个身份卡片中是不展示其内容的,因此信息的优先级可以放置至最后。

变量声明:身份卡必要参数准备

分析完界面元素后,我们在创建页面之前先确定好需要使用到的变量,如下代码所示:


@State var platformIcon: String = "icon_juejin"
@State var title: String = "移动端签约作者"
@State var platformName: String = "稀土掘金技术社区"
@State var indexURL: String = "https://juejin.cn/user/3897092103223517"

image.png

上述代码中,我们都使用@State进行变量的声明,@State可以存储声明的变量及其变量的值。并且为了呈现效果,我们给声明的参数都赋予了初始值。


相关文章
|
iOS开发
SwiftUI极简教程13:NavigationView导航栏使用
SwiftUI极简教程13:NavigationView导航栏使用
2568 2
SwiftUI极简教程13:NavigationView导航栏使用
|
存储 Swift
SwiftUI极简教程41:使用Segment、LazyVGrid和ImagePicker构建一个Logo生成器
在本章中,你将学会使用Segment分段器、LazyVGrid垂直网格、ImagePicker图片选择器构建一个Logo生成器。 在上一章中,我们完善了SearchBar搜索栏、TabView底部导航,还有做了一个Loading加载动作。最近突然有个想法,如果把色卡和图片进行组合,这不就是一个简单的Logo了吗?我能不能做个Logo生成器? 说干就干,我们继续完成App的相关内容。
887 0
SwiftUI极简教程41:使用Segment、LazyVGrid和ImagePicker构建一个Logo生成器
|
iOS开发
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
2034 0
SwiftUI极简教程34:LazyVGrid垂直网格和LazyHGrid水平网格的使用
|
存储 索引
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
870 0
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
|
存储 数据库 Swift
SwiftUI极简教程20:CoreData数据持久化框架的使用(上)
SwiftUI极简教程20:CoreData数据持久化框架的使用(上)
1546 1
SwiftUI极简教程20:CoreData数据持久化框架的使用(上)
|
JSON JavaScript 前端开发
SwiftUI极简教程33:JSON数据的使用
SwiftUI极简教程33:JSON数据的使用
859 0
SwiftUI极简教程33:JSON数据的使用
|
存储 数据库 索引
SwiftUI极简教程22:CoreData数据持久化框架的使用(下)
SwiftUI极简教程22:CoreData数据持久化框架的使用(下)
875 0
SwiftUI极简教程22:CoreData数据持久化框架的使用(下)
|
存储 前端开发 数据安全/隐私保护
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
1288 0
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
|
索引
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程26:构建一个Banner图片轮播(下)
952 0
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程28:TextEditor多行文本框的使用
SwiftUI极简教程28:TextEditor多行文本框的使用
1429 0
SwiftUI极简教程28:TextEditor多行文本框的使用