HarmonyOS 应用 · 班级任务我的页深度解析：渐变头图与负 margin 悬浮统计

项目编号：48-class-task 技术栈：HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面：我的页 ProfileTab.ets（99 行） 系列导航：（一）首页 · （二）任务 · （三）进度 · （四）我的

---

一、StatItem 与 MenuItem 数据模型

interface StatItem { value: string; label: string; }
interface MenuItem { id: number; emoji: string; title: string; }

两个 interface：StatItem（统计项，value+label）+ MenuItem（菜单项，id+emoji+title）。与班费管理我的页同构——个人中心的标准数据模型。

  private stats: StatItem[] = [
    { value: '6', label: '我的任务' },
    { value: '5', label: '已完成' },
    { value: '83%', label: '完成率' }
  ];

  private menus: MenuItem[] = [
    { id: 1, emoji: '📋', title: '我的任务' },
    { id: 2, emoji: '✅', title: '完成记录' },
    { id: 3, emoji: '⏰', title: '任务提醒' },
    { id: 4, emoji: '📊', title: '统计报告' },
    { id: 5, emoji: '⚙️', title: '设置' }
  ];

统计数据三元：6 我的任务 / 5 已完成 / 83% 完成率——与进度页王学委 5/6 一致（当前登录用户是王学委/学习委员）。五项菜单：我的任务/完成记录/任务提醒/统计报告/设置。

---

二、页面骨架：Scroll 四块纵向堆叠

  build() {
    Column() {
      Scroll() {
        Column() {
          this.UserCard()
          this.StatRow()
          this.MenuList()
          this.About()
        }
        .width('100%')
        .padding({ bottom: D.pad + this.safeBottom + 20 })
      }
      .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
    }
    .width('100%').height('100%').backgroundColor(C.bg)
  }

与其他三页不同，我的页没有 Header——UserCard 的渐变头图直接充当头部。Scroll 内四块：UserCard（渐变头图）+ StatRow（悬浮统计）+ MenuList（菜单）+ About（版本）。

---

三、UserCard：紫色渐变 + 📋 任务头像

  @Builder
  UserCard() {
    Row({ space: 14 }) {
      Row() { Text('📋').fontSize(32) }
      .width(64).height(64).backgroundColor('#33FFFFFF').borderRadius(32).justifyContent(FlexAlign.Center)
      Column({ space: 5 }) {
        Text('学习委员').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
        Text('完成 5 项任务 · 完成率 83%').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
      }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    }
    .width('100%')
    .padding({ top: this.safeTop + 30, left: D.pad, right: D.pad, bottom: 44 })
    .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
  }

64×64 半透明圆头像：#33FFFFFF（20% 白透明度）+ borderRadius(32) 正圆 + 32 号 📋——用任务图标当头像，与 Tab 栏首页图标（📋）同源。渐变背景：linearGradient 135° 从 C.primary（#6C5CE7）到 C.accent（#9B8AF5），与首页 ProgressCard 同款紫色渐变。bottom: 44 为 StatRow 的负 margin 悬浮预留空间。

---

四、StatRow：负 margin 悬浮统计卡

  @Builder
  StatRow() {
    Row() {
      ForEach(this.stats, (s: StatItem) => {
        Column({ space: 4 }) {
          Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text)
          Text(s.label).fontSize(11).fontColor(C.textDim)
        }.layoutWeight(1)
      }, (s: StatItem) => s.label)
    }
    .width('92%').padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 })
  }

margin({ top: -24 }) 让统计卡上移 24px，悬浮叠在 UserCard 渐变区下缘——系列标志性手法。width('92%') 左右各留 4% 呼吸边距。三列 layoutWeight(1) 等分：18 号加粗数字 + 11 号灰色标签。6/5/83% 三个数字对应进度页王学委的数据。

---

五、MenuList：Divider 条件分隔的五项菜单

  @Builder
  MenuList() {
    Column() {
      ForEach(this.menus, (m: MenuItem, idx: number) => {
        Row({ space: 12 }) {
          Text(m.emoji).fontSize(18)
          Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1)
          Text('>').fontSize(14).fontColor(C.textDim)
        }
        .width('100%').padding({ left: 14, right: 14, top: 14, bottom: 14 })
        .onClick(() => { promptAction.showToast({ message: m.title }); })
        if (idx < this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) }
      }, (m: MenuItem) => m.title)
    }
    .width('92%').margin({ top: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
  }

每行三栏：18 号 emoji + 14 号标题（layoutWeight(1) 撑开）+ 14 号灰色 > 箭头。onClick 弹 Toast 显示菜单标题。if (idx < this.menus.length - 1) 在非最后一行后加 Divider——0.5px 浅灰分隔线，最后一行不加。

---

六、About：版本信息收尾

  @Builder
  About() {
    Column({ space: 4 }) {
      Text('校园班级任务').fontSize(12).fontColor(C.textDim)
      Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7)
    }.width('100%').margin({ top: 24 })
  }

12 号浅灰应用名 + 11 号更浅版本号（opacity(0.7)），margin({ top: 24 }) 与菜单卡拉开距离——系列统一收尾。

---

七、跨页数据自洽：我的页 = 个人任务总汇

• "学习委员" ↔ 首页 TaskList 任务的 owner 字段——当前用户是学习委员
• "完成 5 项任务 · 完成率 83%" ↔ 进度页王学委 5/6 = 83%——个人数据与进度页一致
• 6 我的任务 / 5 已完成 / 83% 完成率 ↔ 进度页王学委 done=5/total=6——同源数据
• "📋 我的任务"菜单 ↔ 首页 TaskList——个人视角的任务列表
• "📊 统计报告"菜单 ↔ 进度页 OverallCard——个人统计的报告版

---

八、可演进方向

方向	现状	改法	收益
菜单跳转	Toast 占位	路由跳转对应页面	功能闭环
数据来源	静态 6/5/83%	从任务记录动态计算	统计随任务更新
任务提醒	Toast 占位	reminderAgentManager 定时推送	到期自动提醒
统计报告	Toast 占位	生成周报/月报 PDF	报告可分享
个人资料	无编辑入口	头像/昵称/职务可编辑	资料可修改

我的页是班级任务的个人中心——UserCard 渐变头图展示身份、StatRow 悬浮统计量化完成度、MenuList 提供功能入口。从负 margin 悬浮的统计卡到 Divider 条件分隔的菜单，每一层都有明确的职责边界。

系列导航：（一）首页 · （二）任务 · （三）进度 · （四）我的