携手创作，共同成长！这是我参与「掘金日新计划 · 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)
复制代码项目展示
恭喜你，完成了本章的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～