HarmonyOS 应用 · 班级任务我的页深度解析渐变头图与负 margin 悬浮统计项目编号48-class-task 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面我的页ProfileTab.ets99 行 系列导航一首页 · 二任务 · 三进度 ·四我的一、StatItem 与 MenuItem 数据模型interface StatItem { value: string; label: string; } interface MenuItem { id: number; emoji: string; title: string; }两个 interfaceStatItem统计项valuelabelMenuItem菜单项idemojititle。与班费管理我的页同构——个人中心的标准数据模型。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 半透明圆头像#33FFFFFF20% 白透明度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% 三个数字对应进度页王学委的数据。五、MenuListDivider 条件分隔的五项菜单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% 完成率↔ 进度页王学委 done5/total6——同源数据 我的任务菜单↔ 首页 TaskList——个人视角的任务列表 统计报告菜单↔ 进度页 OverallCard——个人统计的报告版八、可演进方向方向现状改法收益菜单跳转Toast 占位路由跳转对应页面功能闭环数据来源静态 6/5/83%从任务记录动态计算统计随任务更新任务提醒Toast 占位reminderAgentManager 定时推送到期自动提醒统计报告Toast 占位生成周报/月报 PDF报告可分享个人资料无编辑入口头像/昵称/职务可编辑资料可修改我的页是班级任务的个人中心——UserCard 渐变头图展示身份、StatRow 悬浮统计量化完成度、MenuList 提供功能入口。从负 margin 悬浮的统计卡到 Divider 条件分隔的菜单每一层都有明确的职责边界。系列导航一首页 · 二任务 · 三进度 ·四我的