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

承接上一章的内容,咱们完成了一个基本设置页面中的个人信息账号绑定通用设置的概况页。这一章节,咱们来完成简历办理的页面建立。

作用预览

咱们先来看看终究的作用图。示例:

颜值即正义,使用SwiftUI搭建简历管理详情页

结构梳理

咱们大体了解下简历办理页面的结构,顶部导航阐明文字、三个上传按钮

顶部导航没什么好说的了,阐明文字有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)
}
}

颜值即正义,使用SwiftUI搭建简历管理详情页

上述代码中,咱们很简单的创立了一个新的视图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()
 }
}

颜值即正义,使用SwiftUI搭建简历管理详情页

上传按钮

咱们看到上传按钮有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)

颜值即正义,使用SwiftUI搭建简历管理详情页

项目展示

颜值即正义,使用SwiftUI搭建简历管理详情页

恭喜你,完成了本章的全部内容!

快来动手试试吧。

假如本专栏对你有协助,不妨点赞、评论、关注~