携手创作，共同成长！这是我参加「日新计划 8 月更文应战」的第16天，点击检查活动概况。

项目布景

运用App以来，关于App端的设计风格和交互都是比较满意的。但某一天当我无聊点开“设置”页面的时分，一股浓浓的“不协调感”扑面而来。

啊这……这也太原始了吧，一点都不高雅。我不能让这种不高雅一直存在，于是就着手测验做一个新的“设置”页面。

项目建立

首先，创立一个新的SwiftUI项目，命名为SettingView。

无人问津的设置页面，如何做到小而精美？

页面款式

咱们先来看下修改后终究的作用，示例：

无人问津的设置页面，如何做到小而精美？

在制作整个页面之前，咱们需求先行剖析整个页面的结构，它包含顶部导航、个人信息栏、设置功用栏、退出登录按钮组成。

因此，在咱们最开端写代码时，需求梳理好页面结构部分。

顶部导航

关于顶部导航栏来说，咱们能够运用NavigationView构建标准的顶部导航。示例：

NavigationView {
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
}
.navigationBarTitle("设置", displayMode: .inline)
}

无人问津的设置页面，如何做到小而精美？

上述代码中，咱们除了运用navigationBarTitle修饰符创立标题外，还运用ZStack叠加视图和edgesIgnoringSafeArea修饰符，给整个页面填充了一个布景色彩。

关于左侧返回按钮，咱们能够单独构建款式，示例：

// 返回上一页
private var backToMineView: some View {
Button(action: {
}) {
Image(systemName: "arrow.backward")
.foregroundColor(.black)
}
}

再运用navigationBarItems修饰符创立导航栏按钮，示例：

.navigationBarItems(leading: backToMineView)

无人问津的设置页面，如何做到小而精美？

个人信息栏

个人信息栏目需求突出个人的根底的账号信息，这儿考虑的是运用用户头像、用户昵称、用户职务作为主要展现信息。示例：

// 个人信息
private var mineMessageView: some View {
Button(action: {
}) {
HStack(spacing: 15) {
Image("me")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60)
.clipShape(Circle())
.overlay(Circle().stroke(Color(.systemGray5), lineWidth: 1))
VStack(alignment: .leading, spacing: 5) {
Text("文如秋雨")
.font(.system(size: 17))
.foregroundColor(.black)
Text("高级产品司理")
.font(.system(size: 14))
.foregroundColor(.gray)
}
}
.padding(.vertical, 10)
}
}

上述代码中，咱们运用Image和Text构建款式部分，文字部分运用VStack纵向排布，整个文字部分和Image图片采用HStack横向排布，至于款式修饰符这儿就不展开说了。

而在咱们将视图展现前，咱们还做需求做一件工作，因为个人信息栏、设置功用栏、退出按钮都是出现分段式卡片作用，咱们能够运用Form表单和Section阶段来构建款式，示例：

Form {
Section {
mineMessageView
}
}

无人问津的设置页面，如何做到小而精美？

咱们发现了存在2个问题，一是整个App的布景色彩因为Form表单的款式影响被覆盖了，二是整个个人信息栏缺少了右边的“向右”按钮。

关于表单款式部分被覆盖的情况，咱们能够在烘托页面时去掉布景色彩，这个咱们之前做过，示例：

init() {
UITableView.appearance().backgroundColor = .clear
}

无人问津的设置页面，如何做到小而精美？

而缺少“向右”的指示按钮，是因为咱们要运用到基于NavigationView顶部导航的跳转，当咱们运用NavigationLink作为跳转办法时，体系会自带指示按钮，所以在这儿咱们没有自己制作按钮款式。

咱们持续完成下面的内容。

设置功用栏

下一部分是设置功用栏，咱们发现这款式之间有共通的地方，左侧图标加设置功用文字，右侧非必须阐明文字加跳转指示。

跳转指示咱们仍旧放在一边，咱们面临具有相同款式式，常用的方法是抽离出来，这样能够减少代码量。示例：

// MARK: 栏目结构
struct listItemView: View {
var itemImage: String
var itemName: String
var itemContent: String
var body: some View {
Button(action: {
}) {
HStack {
Image(systemName: itemImage)
.font(.system(size: 17))
.foregroundColor(.black)
Text(itemName)
.foregroundColor(.black)
.font(.system(size: 17))
Spacer()
Text(itemContent)
.font(.system(size: 14))
.foregroundColor(.gray)
}.padding(.vertical, 15)
}
}
}

咱们构建一个新的视图listItemView，声明一个必要变量：itemImage图标、itemName功用名称、itemContent功用非必须文字。

然后构建根底的款式框架，运用HStack构建横向视图，放置1个Image图片、2个Text文本。

构建好后，咱们在新的的Section阶段中构建款式。示例：

Section {
listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
listItemView(itemImage: "gear.circle", itemName: "通用设置", itemContent: "")
listItemView(itemImage: "briefcase", itemName: "简历办理", itemContent: "未上传")
listItemView(itemImage: "icloud.and.arrow.down", itemName: "版别更新", itemContent: "Version 6.2.8")
listItemView(itemImage: "leaf", itemName: "清理缓存", itemContent: "0.00MB")
listItemView(itemImage: "person", itemName: "关于", itemContent: "")
}

无人问津的设置页面，如何做到小而精美？

退出登录按钮

最后是退出登录按钮，咱们构建一个新的视图，示例：

// 退出登录
private var signOutView: 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)
}
}

咱们也在新的阶段中构建款式，示例：

var body: some View {
NavigationView {
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
Form {
Section {
mineMessageView
}
Section {
listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
listItemView(itemImage: "gear.circle", itemName: "通用设置", itemContent: "")
listItemView(itemImage: "briefcase", itemName: "简历办理", itemContent: "未上传")
listItemView(itemImage: "icloud.and.arrow.down", itemName: "版别更新", itemContent: "Version 6.2.8")
listItemView(itemImage: "leaf", itemName: "清理缓存", itemContent: "0.00MB")
listItemView(itemImage: "person", itemName: "关于", itemContent: "")
}
Section {
signOutView
}
}
}
.navigationBarTitle("设置", displayMode: .inline)
.navigationBarItems(leading: backToMineView)
}
}

项目展现

无人问津的设置页面，如何做到小而精美？

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

接下里的章节，咱们将持续完成App设置页面的功用概况页，敬请期待！

快来着手试试吧。

假如本专栏对你有帮助，不妨点赞、评论、关注～