鸿蒙 ArkTS 实战：从零实现高颜值个人简历页面

一、效果预览最终实现的简历页面包含以下模块顶部居中标题栏带边框的「个人简历」标题基本信息区左侧姓名 / 学校等信息 右侧圆形头像联系方式区电话、邮箱并排展示内容模块区个人简介、主修课程、求职意向、自我评价每个模块带独立边框和标题整体采用浅灰色背景 黑色边框风格简洁专业符合移动端阅读习惯。二、开发环境准备开发工具DevEco Studio 4.0开发语言ArkTS项目模型Stage 模型适配系统HarmonyOS 4.0资源准备提前准备一张头像图片命名为1.png/jpg放入entry/src/main/resources/base/media目录三、完整可运行代码typescript运行Entry Component struct ResumePage { build() { // 最外层垂直布局容器占满整个屏幕 Column() { // 1. 顶部标题栏 Text(个人简历) .width(100%) .fontSize(25) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .padding(15) .border({ width: 1, color: Color.Black }) // 2. 基本信息 头像 横向布局 Row() { // 左侧基本信息垂直布局 Column() { // 第一行信息姓名/性别/年龄 Row() { Text(姓名张三) .fontSize(12) .width(46%) Text(性别男) .fontSize(12) .width(27%) Text(年龄20) .fontSize(12) .width(27%) } .width(100%) .padding(20) .border({ width: 1, color: Color.Black }) .height(80) // 第二行信息毕业学校/专业/学历 Row({ space: 10 }) { Text(毕业学校河软) .fontSize(12) .width(40%) Text(专业计应) .fontSize(12) .width(27%) Text(学历大专) .fontSize(12) .width(27%) } .width(100%) .padding(12) .border({ width: 1, color: Color.Black }) .height(80) } .width(70%) // 左侧信息区占70%宽度 // 右侧头像 Image($r(app.media.1)) .width(30%) .height(160) .objectFit(ImageFit.Cover) .border({ width: 1, color: Color.Black }) } .width(100%) // 3. 联系方式横向布局 Row() { Text(电话888888888) .fontSize(12) .width(50%) .padding(20) .border({ width: 1, color: Color.Black }) Text(邮箱123qq.com) .fontSize(12) .width(50%) .padding(20) .border({ width: 1, color: Color.Black }) } .width(100%) // 4. 个人简介模块 Column() { Text(个人简介) .fontSize(12) .fontWeight(FontWeight.Bold) .padding(15) Text( 计算机专业在校学生熟悉前端、鸿蒙ArkTS开发掌握SQL数据库、Web基础、计算机基础、python等等具备项目开发与团队协作经验热爱编程学习能力强。) .fontSize(12) .padding({ left: 20, right: 20, bottom: 30 }) } .width(100%) .border({ width: 1, color: Color.Black }) // 5. 主修课程模块 Column() { Text(主修课程) .fontSize(12) .fontWeight(FontWeight.Bold) .padding(15) Text(计算机基础、数据库SQL、Web前端开发、鸿蒙应用开发、计算机网络、操作系统、数据结构) .fontSize(12) .padding({ left: 20, right: 20, bottom: 30 }) } .width(100%) .border({ width: 1, color: Color.Black }) // 6. 求职意向模块 Column() { Text(求职意向) .fontSize(12) .fontWeight(FontWeight.Bold) .padding(15) Text(前端开发工程师 / 后端开发工程师 / 软件编程) .fontSize(12) .padding({ left: 20, right: 20, bottom: 30 }) } .width(100%) .border({ width: 1, color: Color.Black }) // 7. 自我评价模块 Column() { Text(自我评价) .fontSize(12) .fontWeight(FontWeight.Bold) .padding(15) Text( 具备扎实计算机专业基础熟练使用ArkTS完成鸿蒙页面搭建拥有社团项目开发经验逻辑清晰善于沟通能快速学习新技术可独立完成基础功能开发愿意从基层岗位积累成长。) .fontSize(12) .padding({ left: 20, right: 20, bottom: 30 }) } .width(100%) .border({ width: 1, color: Color.Black }) } .width(100%) .height(100%) .backgroundColor(0xF0F0F0) // 浅灰色背景提升页面质感 } }四、代码逐行深度解析1. 组件入口定义typescript运行Entry Component struct ResumePage {}Entry标记该组件为页面入口可独立渲染和预览Component自定义组件装饰器实现 UI 复用structArkTS 中定义组件的关键字2. 最外层布局容器typescript运行Column() { ... } .width(100%) .height(100%) .backgroundColor(0xF0F0F0)Column垂直布局容器所有子组件从上到下依次排列width(100%)/height(100%)让容器占满整个屏幕backgroundColor(0xF0F0F0)设置浅灰色背景避免纯白页面过于单调3. 顶部标题栏typescript运行Text(个人简历) .width(100%) .fontSize(25) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .padding(15) .border({ width: 1, color: Color.Black })width(100%)标题栏占满屏幕宽度fontSize(25)/fontWeight(FontWeight.Bold)大号加粗字体突出标题textAlign(TextAlign.Center)文字居中对齐padding(15)内边距避免文字贴边border添加 1px 黑色边框让标题栏更醒目4. 基本信息 头像横向布局typescript运行Row() { Column() { ... } // 左侧信息区 Image(...) // 右侧头像 } .width(100%)Row水平布局容器实现左右分栏左侧Column占70%宽度用于展示两行个人信息右侧Image占30%宽度展示头像头像设置objectFit(ImageFit.Cover)保证图片不变形铺满容器border添加边框和整体风格统一5. 信息行布局技巧typescript运行Row() { Text(姓名张三).width(46%) Text(性别男).width(27%) Text(年龄20).width(27%) }用Row实现水平排版通过width(xx%)精确控制每个文本的占比保证信息对齐padding和height固定行高让布局更规整border给每行信息添加边框形成表格感6. 内容模块设计typescript运行Column() { Text(个人简介).fontWeight(FontWeight.Bold).padding(15) Text(...) }