HarmonyOS 应用 · 班级任务进度页深度解析Progress 线性条与达标变色项目编号48-class-task 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面进度页Func2Tab.ets99 行 系列导航一首页 · 二任务 ·三进度· 四我的一、MemberProgress interface 与 percent 方法interface MemberProgress { id: number; emoji: string; name: string; done: number; total: number; }五个字段id是 key 锚点emoji是头像name是姓名done是已完成数total是总任务数。与首页Task.done的布尔位不同进度页用done/total数值对——量化每个成员的完成进度。private members: MemberProgress[] [ { id: 1, emoji: , name: 李班长, done: 8, total: 8 }, { id: 2, emoji: , name: 王学委, done: 5, total: 6 }, { id: 3, emoji: , name: 陈生委, done: 3, total: 5 }, { id: 4, emoji: , name: 刘宣委, done: 4, total: 4 }, { id: 5, emoji: , name: 张文委, done: 2, total: 5 } ]; private percent(m: MemberProgress): number { return Math.round(m.done * 100 / m.total); }五位成员李班长 8/8100%、王学委 5/683%、陈生委 3/560%、刘宣委 4/4100%、张文委 2/540%。percent(m)用Math.round四舍五入——5/6 83.33% → 83%。二、页面骨架OverallCard MemberListbuild() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.OverallCard() this.SectionTitle(成员完成情况) this.MemberList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }Header 在 Scroll 外固定Scroll 内三块OverallCard三色概览 SectionTitle分区标题 MemberList成员进度列表。三、OverallCard三色统计概览Builder OverallCard() { Row() { Column({ space: 4 }) { Text(28).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(总任务).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) Column({ space: 4 }) { Text(22).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok) Text(已完成).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) Column({ space: 4 }) { Text(79%).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.accent) Text(完成率).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) } .width(100%).padding({ top: 16, bottom: 16 }).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }三色统计——总任务紫C.primary、已完成绿C.ok、完成率浅紫C.accent。28 86545各成员 total 之和22 85342各成员 done 之和79% round(22/28*100)。四、MemberListProgress 线性条 达标变色Builder MemberList() { Column({ space: 12 }) { ForEach(this.members, (m: MemberProgress) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(22) } .width(44).height(44).backgroundColor(C.primarySoft).borderRadius(22).justifyContent(FlexAlign.Center) Column({ space: 6 }) { Row() { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1) Text(m.done / m.total).fontSize(12).fontColor(C.textDim) }.width(100%) Progress({ value: m.done, total: m.total }).color(this.percent(m) 100 ? C.ok : C.primary).width(100%) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (m: MemberProgress) m.id.toString()) }.width(100%) }Progress线性条——与首页的ProgressType.Ring不同进度页用默认线性条Progress({ value: m.done, total: m.total }) .color(this.percent(m) 100 ? C.ok : C.primary) .width(100%)达标变色——percent(m) 100时进度条变绿C.ok否则紫色C.primary李班长 8/8 → 100% → 绿色进度条王学委 5/6 → 83% → 紫色进度条刘宣委 4/4 → 100% → 绿色进度条100% 达标的成员进度条变绿——完成的视觉确认与首页done true的 ✅ 同语义。卡片布局44×44 浅紫圆头像 右侧双行姓名 done/total Progress 条。Progress宽度100%撑满右侧区域。五、跨页数据自洽进度页与首页的联动28 总任务↔ 首页 4 条 其他未展示任务——进度页统计全量22 已完成↔ 首页 doneCount1 条已完成 其他——进度页是全班级视角79% 完成率 round(22/28*100) ↔ 我的页83% 完成率5/683%个人视角王学委 5/6↔ 我的页完成 5 项任务——当前登录用户是王学委李班长 8/8 达标↔ 进度条变绿——100% 完成的视觉确认六、可演进方向方向现状改法收益数据来源静态 5 人从任务记录动态聚合进度随任务更新排序方式数组顺序按完成率倒序排序高完成率在前进度点击无 onClick点击进入成员任务明细下钻查看达标激励仅变色100% 时显示勋章/徽章达标成就感时间维度无按周/月切换统计周期时间趋势分析进度页是班级任务的分析视角——OverallCard 三色概览 MemberList 的Progress线性条 达标变色。从percent(m) 100的条件变色到Math.round的百分比计算每一层都有明确的职责边界。系列导航一首页 · 二任务 ·三进度· 四我的
HarmonyOS 应用 · 班级任务进度页深度解析Progress 线性条与达标变色项目编号48-class-task 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面进度页Func2Tab.ets99 行 系列导航一首页 · 二任务 ·三进度· 四我的一、MemberProgress interface 与 percent 方法interface MemberProgress { id: number; emoji: string; name: string; done: number; total: number; }五个字段id是 key 锚点emoji是头像name是姓名done是已完成数total是总任务数。与首页Task.done的布尔位不同进度页用done/total数值对——量化每个成员的完成进度。private members: MemberProgress[] [ { id: 1, emoji: , name: 李班长, done: 8, total: 8 }, { id: 2, emoji: , name: 王学委, done: 5, total: 6 }, { id: 3, emoji: , name: 陈生委, done: 3, total: 5 }, { id: 4, emoji: , name: 刘宣委, done: 4, total: 4 }, { id: 5, emoji: , name: 张文委, done: 2, total: 5 } ]; private percent(m: MemberProgress): number { return Math.round(m.done * 100 / m.total); }五位成员李班长 8/8100%、王学委 5/683%、陈生委 3/560%、刘宣委 4/4100%、张文委 2/540%。percent(m)用Math.round四舍五入——5/6 83.33% → 83%。二、页面骨架OverallCard MemberListbuild() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.OverallCard() this.SectionTitle(成员完成情况) this.MemberList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }Header 在 Scroll 外固定Scroll 内三块OverallCard三色概览 SectionTitle分区标题 MemberList成员进度列表。三、OverallCard三色统计概览Builder OverallCard() { Row() { Column({ space: 4 }) { Text(28).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(总任务).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) Column({ space: 4 }) { Text(22).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok) Text(已完成).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) Column({ space: 4 }) { Text(79%).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.accent) Text(完成率).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) } .width(100%).padding({ top: 16, bottom: 16 }).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }三色统计——总任务紫C.primary、已完成绿C.ok、完成率浅紫C.accent。28 86545各成员 total 之和22 85342各成员 done 之和79% round(22/28*100)。四、MemberListProgress 线性条 达标变色Builder MemberList() { Column({ space: 12 }) { ForEach(this.members, (m: MemberProgress) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(22) } .width(44).height(44).backgroundColor(C.primarySoft).borderRadius(22).justifyContent(FlexAlign.Center) Column({ space: 6 }) { Row() { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1) Text(m.done / m.total).fontSize(12).fontColor(C.textDim) }.width(100%) Progress({ value: m.done, total: m.total }).color(this.percent(m) 100 ? C.ok : C.primary).width(100%) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (m: MemberProgress) m.id.toString()) }.width(100%) }Progress线性条——与首页的ProgressType.Ring不同进度页用默认线性条Progress({ value: m.done, total: m.total }) .color(this.percent(m) 100 ? C.ok : C.primary) .width(100%)达标变色——percent(m) 100时进度条变绿C.ok否则紫色C.primary李班长 8/8 → 100% → 绿色进度条王学委 5/6 → 83% → 紫色进度条刘宣委 4/4 → 100% → 绿色进度条100% 达标的成员进度条变绿——完成的视觉确认与首页done true的 ✅ 同语义。卡片布局44×44 浅紫圆头像 右侧双行姓名 done/total Progress 条。Progress宽度100%撑满右侧区域。五、跨页数据自洽进度页与首页的联动28 总任务↔ 首页 4 条 其他未展示任务——进度页统计全量22 已完成↔ 首页 doneCount1 条已完成 其他——进度页是全班级视角79% 完成率 round(22/28*100) ↔ 我的页83% 完成率5/683%个人视角王学委 5/6↔ 我的页完成 5 项任务——当前登录用户是王学委李班长 8/8 达标↔ 进度条变绿——100% 完成的视觉确认六、可演进方向方向现状改法收益数据来源静态 5 人从任务记录动态聚合进度随任务更新排序方式数组顺序按完成率倒序排序高完成率在前进度点击无 onClick点击进入成员任务明细下钻查看达标激励仅变色100% 时显示勋章/徽章达标成就感时间维度无按周/月切换统计周期时间趋势分析进度页是班级任务的分析视角——OverallCard 三色概览 MemberList 的Progress线性条 达标变色。从percent(m) 100的条件变色到Math.round的百分比计算每一层都有明确的职责边界。系列导航一首页 · 二任务 ·三进度· 四我的
