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

携手创作，一起生长！这是我参与「日新计划 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: "")
}

我们预览下作用：

恭喜你，完结了本章的全部内容！

快来着手试试吧。

假设本专栏对你有帮忙，不妨点赞、评论、重视～