一、效果预览 

最终实现的简历页面包含以下模块：

• 顶部居中标题栏：带边框的「个人简历」标题
• 基本信息区：左侧姓名 / 学校等信息 + 右侧圆形头像
• 联系方式区：电话、邮箱并排展示
• 内容模块区：个人简介、主修课程、求职意向、自我评价，每个模块带独立边框和标题

整体采用浅灰色背景 + 黑色边框，风格简洁专业，符合移动端阅读习惯。

---

二、开发环境准备 

• 开发工具：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(...)
}