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

2023-11-03 44

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

颜值即正义，使用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)