一、效果预览
最终实现的简历页面包含以下模块：
- 顶部居中标题栏：带边框的「个人简历」标题
- 基本信息区：左侧姓名 / 学校等信息 + 右侧圆形头像
- 联系方式区：电话、邮箱并排展示
- 内容模块区：个人简介、主修课程、求职意向、自我评价，每个模块带独立边框和标题
整体采用浅灰色背景 + 黑色边框，风格简洁专业，符合移动端阅读习惯。
二、开发环境准备
- 开发工具：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("邮箱：123@qq.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 复用struct：ArkTS 中定义组件的关键字
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(...) }
