颜值即正义，使用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) } }
上述代码中，我们很简单的创建了一个新的视图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)
项目展示
恭喜你，完成了本章的全部内容！
快来动手试试吧。
