携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第17天,点击查看活动详情。
承接上一章的内容,我们完成了一个基本设置页面。
那本章中,我们继续来完成功能设置的详情页。
个人信息页
个人信息页承载的功能是帮助用户修改和查看个人的基本信息,包含但不限于用户头像、用户昵称、用户ID、个人简介,针对于不同的业务场景,可以补充职位、公司等信息。
以下图个人信息详情页为例:
我们从设置的首页,点击个人信息栏,就可以跳转进入个人详细详情页。最基础的页面跳转方法,我们可以使用基于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
}
复制代码
我们预览下效果:
账号绑定页
账号绑定页面承载着该App
关联绑定的用户账号信息,包含注册的账号(一般为手机号、邮箱)、登录密码,以及第三方授权的社交账号、社区帐号等。
以下图账号绑定详情页为例:
以上图为例,我们发现账号绑定详情页的结构和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
绑定GitHub
、isWeiboBingding
绑定微博。
最后我们和退出登录按钮一样构建了cancelAccount
注销账号按钮。
我们回到ContentView
视图中,完善跳转方法。示例:
NavigationLink(destination: PersonalDataView()) {
listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
}
复制代码
我们预览下效果:
通用设置面
原有的掘金App存在一些难以理解的操作功能,示例:基础版掘金、个性化推荐设置、推送通知设置。用户对于这些设置功能学习成本较高,以及存在由于功能分散而导致找不到设置操作等问题。
这,不够优雅。
这里提供的产品方案是将功能设置操作统归为一个通用设置页面。示例:
页面内容也比较简单,我们可以使用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: "")
}
复制代码
我们预览下效果:
恭喜你,完成了本章的全部内容!
快来动手试试吧。
如果本专栏对你有帮助,不妨点赞、评论、关注~