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

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
数据可视化 DataV(企业版),20 个大屏 1 个月
简介: 颜值即正义,使用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 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
1月前
|
JavaScript 开发工具 git
VanBlog:真的太丝滑啦,简洁实用优雅的个人博客系统,支持文章、评论、分类、标签一站式管理,赶紧上车
嗨,大家好,我是小华同学。VanBlog是一个基于Vue3、Vite、NaiveUI和TypeScript的开源博客系统,支持Markdown编辑,具备文章发布、评论、分类、标签、搜索等功能。界面简洁美观,响应式设计适用于各种设备。
VanBlog:真的太丝滑啦,简洁实用优雅的个人博客系统,支持文章、评论、分类、标签一站式管理,赶紧上车
|
10月前
|
Web App开发 存储 自然语言处理
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
186 0
|
10月前
|
安全 中间件 区块链
BRC-20铭文系统开发详细教程/步骤方案/需求设计/规则玩法/源码程序
中间件技术:使用中间件技术可以简化BRC20铭文智能合约跨链系统的开发过程。中间件提供了一些常用功能的封装,例如处理网络通信、
|
10月前
|
缓存 小程序 数据可视化
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
44 0
NFT卡牌游戏链游系统开发(开发方案)/详情规则/成熟技术/设计界面/案例项目/源码程序
NFT (Non Homogeneous Token) card chain game refers to a game based on blockchain technology where NFT is used as the card in the game. NFT is a unique and non interchangeable digital asset that can represent various virtual cards, props, or characters in the game.
抽签软件免费提供,代码开源,可用作抽奖、课堂抽背、游戏分组等活动场合,可以直接下载
抽签软件免费提供,代码开源,可用作抽奖、课堂抽背、游戏分组等活动场合,可以直接下载
800 1
抽签软件免费提供,代码开源,可用作抽奖、课堂抽背、游戏分组等活动场合,可以直接下载
实战:第二十章:社交类用户登录功能
实战:第二十章:社交类用户登录功能
109 0
实战:第二十章:社交类用户登录功能
|
前端开发
前端工作总结212-账号绑定逻辑复杂
前端工作总结212-账号绑定逻辑复杂
93 0
前端工作总结212-账号绑定逻辑复杂
|
Android开发 开发者
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )
564 0
【广告接入】Android 应用接入有米广告积分墙 ( 注册有米云账号 | 首次登录设置开发者信息 | 添加应用 )
有律师提出,UI只包含移动APP的设计页面,并不包含管理移动APP的电脑PC管理页面,此问题是否正确? 请问如何举证?
有律师提出,UI只包含移动APP的设计页面,并不包含管理移动APP的电脑PC管理页面,此问题是否正确? 请问如何举证?
1619 0