携手创作，共同成长！这是我参加「日新计划 8 月更文挑战」的第18天，点击检查活动概况。
承接上一章的内容，咱们完成了一个基本设置页面中的个人信息、账号绑定、通用设置的概况页。这一章节，咱们来完成简历办理的页面建立。
作用预览
咱们先来看看终究的作用图。示例：
结构梳理
咱们大体了解下简历办理页面的结构，顶部导航、阐明文字、三个上传按钮。
顶部导航没什么好说的了，阐明文字有2个，采用的是纵向排布且左对齐，而三个上传按钮结构类似，咱们能够抽离出款式减少代码量。
最终阐明文字和上传按钮和阐明文字也是纵向排布，不同的是采用居中对齐。
顶部导航
首先咱们来完成顶部导航，示例：
// MARK: 简历办理概况页
struct UploadResume: View {
var body: some View {
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
}.navigationBarTitle("简历办理", displayMode: .inline)
}
}
上述代码中，咱们很简单的创立了一个新的视图UploadResume。然后给视图ZStack覆盖上一层背景色彩，最终设置了navigationBarTitle顶部导航的标题。
阐明文字
阐明文字部分，咱们能够独自构建款式，然后在UploadResume视图中运用。示例：
// 阐明文字
func helpContent() -> some View {
VStack(alignment: .leading, spacing: 20) {
Text("请选择上传方法")
.font(.title)
.fontWeight(.bold)
Text("主张运用PDF文件，也支持Doc、Docx、JPG、PNG格局，巨细不超过5M。")
}.padding()
}
上述代码中，咱们运用VStack布局，然后设置了2个Text作为阐明文字的内容，它们的对齐方法咱们运用leading左对齐。
咱们在UploadResume视图中运用也坚持左对齐，示例：
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
VStack(alignment: .leading, spacing: 40) {
helpContent()
}
}
上传按钮
咱们看到上传按钮有3个，且结构类似，因而咱们能够抽离出款式部分。示例：
// 上传操作
func uploadContent(image: String, text: String, isRecommend: String) -> some View {
HStack(spacing: 20) {
Image(image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 40)
.clipShape(Circle())
Text(text)
.font(.system(size: 17))
.foregroundColor(.black)
Spacer()
Text(isRecommend)
.font(.system(size: 17))
.foregroundColor(.green)
}
.padding(.horizontal)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 80)
.background(.white)
.cornerRadius(8)
.padding(.horizontal)
}
上述代码中，咱们没有和之前一样运用结构体，而是运用方法创立新的视图uploadContent。
上传按钮有Image图标、上传方法Text、是否引荐Text，咱们将这三个参数抽离传入，然后返回创立一个View视图。
在uploadContent视图中，咱们运用HStack横向排布3个元素，最终设置按钮的尺度和背景色彩，就完成了按钮款式的内容。
然后咱们在UploadResume视图中创立款式，示例：
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
VStack(alignment: .leading, spacing: 40) {
helpContent()
VStack(alignment: .center, spacing: 20) {
Button(action: {
}) {
uploadContent(image: "weChat", text: "微信上传", isRecommend: "引荐")
}
Button(action: {
}) {
uploadContent(image: "phone", text: "本地上传", isRecommend: "")
}
Button(action: {
}) {
uploadContent(image: "mail", text: "邮件上传", isRecommend: "")
}
}
Spacer()
}
.padding(.top, 40)
.padding(.bottom, 40)
}.navigationBarTitle("简历办理", displayMode: .inline)
项目展示
恭喜你，完成了本章的全部内容！
快来动手试试吧。
假如本专栏对你有协助，不妨点赞、评论、关注～
