颜值即正义,使用SwiftUI搭建个人信息、账号绑定、通用设置详情页

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 颜值即正义,使用SwiftUI搭建个人信息、账号绑定、通用设置详情页

颜值即正义,使用SwiftUI搭建个人信息、账号绑定、通用设置详情页


个人信息页

个人信息页承载的功能是帮助用户修改和查看个人的基本信息,包含但不限于用户头像用户昵称用户ID个人简介,针对于不同的业务场景,可以补充职位公司等信息。

以下图个人信息详情页为例:

image.png

我们从设置的首页,点击个人信息栏,就可以跳转进入个人详细详情页。最基础的页面跳转方法,我们可以使用基于NavigationView的页面跳转方法。

但首先,我们需要先完成详情页的内容。示例:

// MARK: 个人资料详情页
struct PersonalDataView: View {
    var body: some View {
        ZStack {
            Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
            VStack(spacing: 20) {
                Image("me")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 100)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color(.systemGray5), lineWidth: 1))
                Text("修改头像")
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
                Form {
                    Section {
                        listItemView(itemImage: "", itemName: "用户名", itemContent: "文如秋雨")
                        listItemView(itemImage: "", itemName: "掘金ID", itemContent: "3897092103223517")
                        listItemView(itemImage: "", itemName: "职位", itemContent: "高级产品经理")
                        listItemView(itemImage: "", itemName: "公司", itemContent: "未知")
                        listItemView(itemImage: "", itemName: "简介", itemContent: "什么也没留下")
                    }
                }
            }.padding(.top, 40)
        }.navigationBarTitle("个人信息", displayMode: .inline)
    }
}

一般来说,如果我们需要设计一个新的页面,通常使用结构体创建一个新的视图。这里,我们创建了一个新的视图PersonalDataView来承载内容。

页面样式内容包括使用ZStack将页面包裹填充背景颜色,然后使用Image图片和Text构建修改头像样式,使用Form表单和listItemView栏目结构构建详情页的可修改栏目。这里由于后续我们也可以使用NavigationView跳转方法,因此先不加指示器。

最后我们回到ContentView视图中,完善跳转方法。示例:

NavigationLink(destination: PersonalDataView()) {
    mineMessageView
}

我们预览下效果:

image.png

账号绑定页

账号绑定页面承载着该App关联绑定的用户账号信息,包含注册的账号(一般为手机号、邮箱)、登录密码,以及第三方授权的社交账号、社区帐号等。

以下图账号绑定详情页为例:

image.png

以上图为例,我们发现账号绑定详情页的结构和Form表单的结构,这里我们可以采用和设置页面相同的页面布局结构,示例:

// MARK: 绑定账号详情页
struct AccountBindingView: View {
    @State var isWechatBingding = true
    @State var isGitHubBingding = false
    @State var isWeiboBingding = false
    var body: some View {
        ZStack {
            Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
            Form {
                Section {
                    listItemView(itemImage: "", itemName: "手机号", itemContent: "1666666666")
                    listItemView(itemImage: "", itemName: "修改密码", itemContent: "")
                }
                Section(header: Text("第三方账号")) {
                    Toggle(isOn: $isWechatBingding) {
                        Text("微信")
                    }
                    Toggle(isOn: $isGitHubBingding) {
                        Text("GitHub")
                    }
                    Toggle(isOn: $isWeiboBingding) {
                        Text("新浪微博")
                    }
                }.padding(.vertical, 5)
                Section {
                    cancelAccount
                }
            }.navigationBarTitle("账号绑定", displayMode: .inline)
        }
    }
    // 注销账号
    private var cancelAccount: some View {
        Button(action: {
        }) {
            Text("注销账号")
                .font(.system(size: 17))
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 30, maxHeight: 30)
                .foregroundColor(.red)
                .cornerRadius(8)
                .padding(.vertical, 5)
        }
    }
}

上述代码中,我们依旧使用ZStack层叠覆盖一个背景颜色,然后使用Form表单和Section段落构建样式。

第三方账号绑定由于我们使用Toggle开关的方式,我们需要提前声明3个变量isWechatBingding绑定微信、isGitHubBingding绑定GitHubisWeiboBingding绑定微博。

最后我们和退出登录按钮一样构建了cancelAccount注销账号按钮。

我们回到ContentView视图中,完善跳转方法。示例:

NavigationLink(destination: PersonalDataView()) {
    listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
}

我们预览下效果:

通用设置面

原有的掘金App存在一些难以理解的操作功能,示例:基础版掘金个性化推荐设置推送通知设置。用户对于这些设置功能学习成本较高,以及存在由于功能分散而导致找不到设置操作等问题。

这,不够优雅。

这里提供的产品方案是将功能设置操作统归为一个通用设置页面。示例:

image.png

页面内容也比较简单,我们可以使用Form表单、Section段落、Toggle开关来构建样式。示例:

// MARK: 通用设置详情页
struct GeneralSettingView: View {
    @State var isFullSelected = true
    @State var isIndividuationSelected = true
    @State var isChoicenessSelected = true
    @State var isInformationSelected = true
    var body: some View {
        ZStack {
            Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
            Form {
                Section {
                    Toggle(isOn: $isFullSelected) {
                        VStack(alignment: .leading, spacing: 5) {
                            Text("完整版功能")
                                .font(.system(size: 17))
                                .foregroundColor(.black)
                            Text("开启后可享有完整功能,建议开启")
                                .font(.system(size: 14))
                                .foregroundColor(.gray)
                        }
                    }
                    Toggle(isOn: $isIndividuationSelected) {
                        VStack(alignment: .leading, spacing: 5) {
                            Text("个性化推荐")
                                .font(.system(size: 17))
                                .foregroundColor(.black)
                            Text("开启后将根据您的喜好进行内容推荐")
                                .font(.system(size: 14))
                                .foregroundColor(.gray)
                        }
                    }
                    Toggle(isOn: $isChoicenessSelected) {
                        VStack(alignment: .leading, spacing: 5) {
                            Text("精选内容推送")
                                .font(.system(size: 17))
                                .foregroundColor(.black)
                            Text("开启后将享有精选内容推荐")
                                .font(.system(size: 14))
                                .foregroundColor(.gray)
                        }
                    }
                    Toggle(isOn: $isInformationSelected) {
                        VStack(alignment: .leading, spacing: 5) {
                            Text("消息推送")
                                .font(.system(size: 17))
                                .foregroundColor(.black)
                            Text("关闭后将无法收到及时通知,建议开启")
                                .font(.system(size: 14))
                                .foregroundColor(.gray)
                        }
                    }
                }.padding(.vertical, 5)
            }.navigationBarTitle("通用设置", displayMode: .inline)
        }
    }
}

最后我们回到ContentView视图中,完善跳转方法。示例:

NavigationLink(destination: PersonalDataView()) {
    listItemView(itemImage: "gear.circle", itemName: "通用设置", itemContent: "")
}

我们预览下效果:

恭喜你,完成了本章的全部内容!

快来动手试试吧。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
小程序
【易售小程序项目】悬浮按钮+出售闲置商品+商品分类选择【后端基于若依管理系统开发】
【易售小程序项目】悬浮按钮+出售闲置商品+商品分类选择【后端基于若依管理系统开发】
51 0
|
3月前
|
UED
【打造梦幻联动!】揭秘钉钉宜搭中的单选关联选项设置与图文展示的魔术 —— 让你的表单瞬间变身智能导游!
【8月更文挑战第7天】随着企业信息化的发展,办公自动化工具如钉钉宜搭成为提高效率的关键。宜搭是一款低代码平台,支持灵活的表单设计与流程管理。以旅行社报名表为例,介绍如何实现单选字段联动图文展示:用户选择目的地后自动显示相关信息。设计上,先创建单选和图文字段,再设置联动逻辑。通过简单的后台配置即可实现动态展示效果,提升用户体验与数据准确性。
94 0
|
4月前
|
前端开发 开发工具 数据库
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
|
6月前
|
监控 小程序 安全
社区每周丨支付有礼支持引导用户收藏小程序及人脸认证接口更新(8.7-8.11)
社区每周丨支付有礼支持引导用户收藏小程序及人脸认证接口更新(8.7-8.11)
174 11
|
6月前
|
缓存 小程序 数据可视化
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
34 0
|
前端开发 API 图形学
元宇宙虚拟社区交友软件APP开发规则详情及源码示例
元宇宙虚拟社区交友软件可以使用开源框架搭建,如React Native,Unity或者Xamarin等,也可以使用现有的虚拟化平台如 OVH、River, RuXen, XSquaredClipse, Shenandoah Valley等。
|
安全 Java API
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
本文将会深入探讨如何利用手机号码归属地 API 在防止电话骚扰,此外,还会给大家列出手机号码归属地 API 的其他应用场景。
460 0
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
|
Web App开发 安全
【信仰充值中心】Firefox 97 后续更新一览
【信仰充值中心】Firefox 97 后续更新一览
99 0
|
人工智能 供应链 安全
DingTalk「开发者说」- 酷应用业务篇之:类目酷应用化的机会点及方法路径剖析
本篇主要讲解酷应用的红利期与机会点,以及做酷应用的方法路径。
DingTalk「开发者说」- 酷应用业务篇之:类目酷应用化的机会点及方法路径剖析
|
Android开发 开发者
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )
448 0
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )