企业官网建设流程全解析

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 栏首页图标（📋）同源。渐变背景：linearGradient135° 从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——个人统计的报告版

八、可演进方向

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

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