HarmonyOS 应用 · 班级任务首页深度解析Progress 环形进度与 toggle 勾选刷新项目编号48-class-task 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets103 行 系列导航一首页· 二任务 · 三进度 · 四我的一、Theme.ets紫色主题与任务管理产品的色彩语义export class C { static readonly bg: string #F2F5FB; static readonly card: string #FFFFFF; static readonly cardSoft: string #F4F6FB; static readonly stroke: string #EAEEF6; static readonly text: string #1C2333; static readonly textSub: string #5A6483; static readonly textDim: string #9AA3BC; static readonly primary: string #6C5CE7; static readonly primarySoft: string #ECE8FD; static readonly accent: string #9B8AF5; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }班级任务的主色是#6C5CE7深紫与班费管理的#00A862翡翠绿、通讯录的#0984E3亮蓝形成区分。紫色传递任务/协作/管理的色彩语义——任务管理是协调型应用紫色比绿色更中性、比蓝色更有调度感。primarySoft#ECE8FD是浅紫底色做头像背景。二、Index.etsTabs 容器与四 Tab 布局Tabs({ barPosition: BarPosition.End, index: this.current }) { TabContent() { HomeTab() }.tabBar(this.bar(首页, , 0)) TabContent() { Func1Tab() }.tabBar(this.bar(任务, ✏️, 1)) TabContent() { Func2Tab() }.tabBar(this.bar(进度, , 2)) TabContent() { ProfileTab() }.tabBar(this.bar(我的, , 3)) } .barBackgroundColor(#FFFFFF) .barHeight(60 this.safeBottom) .scrollable(false) .onChange((idx: number) { this.current idx; }) .width(100%).height(100%).backgroundColor(C.bg)四个 Tab首页()/任务(✏️)/进度()/我的()。任务管理的四个环节查看今日任务 → 创建新任务 → 查看成员进度 → 个人统计。三、Task interface 与 State tasks 数组interface Task { id: number; emoji: string; title: string; owner: string; deadline: string; done: boolean; }六个字段id是 key 锚点emoji是任务图标title是任务标题owner是负责人deadline是截止时间done是是否完成的布尔位。done是首页的核心状态字段——驱动勾选符号、标题颜色、删除线三态变化。State tasks: Task[] [ { id: 1, emoji: , title: 收齐班费并登记, owner: 生活委员, deadline: 今天, done: false }, { id: 2, emoji: , title: 发布运动会通知, owner: 宣传委员, deadline: 今天, done: true }, { id: 3, emoji: , title: 统计社会实践报名, owner: 学习委员, deadline: 明天, done: false }, { id: 4, emoji: , title: 筹备班级团建, owner: 文娱委员, deadline: 本周, done: false } ];State tasks是State修饰的数组——与普通private不同State让数组引用变化时触发 UI 刷新。四条任务1 项已完成发布运动会通知 3 项待完成。四、doneCount 与 toggle不可变更新模式private doneCount(): number { let n 0; this.tasks.forEach((t: Task) { if (t.done) { n; } }); return n; } private toggle(item: Task): void { item.done !item.done; this.tasks this.tasks.slice(); }doneCount()遍历tasks统计已完成数——每次调用都重新计算保证进度始终最新。toggle(item)是首页的核心交互方法——两步不可变更新// 1. 翻转 done 布尔位 item.done !item.done; // 2. slice() 生成新数组引用触发 State 刷新 this.tasks this.tasks.slice();slice()无参调用返回数组浅拷贝——新引用触发State重新渲染ProgressCard 的环形进度和 TaskList 的勾选态同步刷新。这是 ArkUI 中数组状态更新的标准范式。五、ProgressCardProgress 环形组件 渐变背景Builder ProgressCard() { Row({ space: 16 }) { Stack({ alignContent: Alignment.Center }) { Progress({ value: this.doneCount(), total: this.tasks.length, type: ProgressType.Ring }) .width(64).height(64).color(#FFFFFF).style({ strokeWidth: 6 }).backgroundColor(#44FFFFFF) Text(this.doneCount() / this.tasks.length).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) } Column({ space: 4 }) { Text(今日任务进度).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(还有 (this.tasks.length - this.doneCount()) 项待完成).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }Progress组件——系列首次出现的环形进度Progress({ value: this.doneCount(), total: this.tasks.length, type: ProgressType.Ring }) .width(64).height(64).color(#FFFFFF).style({ strokeWidth: 6 }).backgroundColor(#44FFFFFF)ProgressType.Ring环形进度条value是当前值doneCounttotal是总数tasks.length。color(#FFFFFF)白色进度环 backgroundColor(#44FFFFFF)半透明底环——在紫色渐变背景上白环可见。style({ strokeWidth: 6 })环宽 6px。Stack 叠加环形 Progress 中心文字1/4——Alignment.Center让文字居中在环内。右侧今日任务进度 还有 3 项待完成this.tasks.length - this.doneCount()动态计算待完成数。六、TaskListdone 驱动的勾选 删除线双态Builder TaskList() { Column({ space: 10 }) { ForEach(this.tasks, (t: Task) { Row({ space: 12 }) { Text(t.done ? ✅ : ⬜).fontSize(22).onClick(() { this.toggle(t); }) Column({ space: 4 }) { Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None }) Text(负责人: t.owner · t.deadline).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(t.emoji).fontSize(20) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (t: Task) t.id.toString()) }.width(100%) }done驱动三元变化——勾选符号、标题颜色、删除线三路分支// 勾选符号✅ vs ⬜ Text(t.done ? ✅ : ⬜) // 标题颜色灰色 vs 深色 .fontColor(t.done ? C.textDim : C.text) // 删除线有 vs 无 .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None })done true时 ✅ 灰色标题 删除线已完成视觉弱化done false时 ⬜ 深色标题 无删除线待完成视觉突出。TextDecorationType.LineThrough是 ArkUI 的删除线装饰——已完成任务的经典视觉表达。勾选符号onClick调this.toggle(t)——点击翻转doneslice()触发刷新ProgressCard 环形进度和 TaskList 勾选态同步更新。七、可演进方向方向现状改法收益任务创建静态 4 条接入任务 Tab 创建后追加任务动态新增数据持久State 内存Preferences 持久化重启不丢失过期检测无比对 deadline 与当前日期过期任务标红拖拽排序无ItemTouchHelper 拖拽任务优先级手动调整任务详情无 onClick点击进入详情页展示完整描述首页是班级任务的概览——ProgressCard 的环形进度 TaskList 的done驱动勾选双态。从toggle的不可变更新到TextDecorationType.LineThrough的删除线装饰每一层都有明确的职责边界。系列导航一首页· 二任务 · 三进度 · 四我的
HarmonyOS 应用 · 班级任务首页深度解析Progress 环形进度与 toggle 勾选刷新项目编号48-class-task 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets103 行 系列导航一首页· 二任务 · 三进度 · 四我的一、Theme.ets紫色主题与任务管理产品的色彩语义export class C { static readonly bg: string #F2F5FB; static readonly card: string #FFFFFF; static readonly cardSoft: string #F4F6FB; static readonly stroke: string #EAEEF6; static readonly text: string #1C2333; static readonly textSub: string #5A6483; static readonly textDim: string #9AA3BC; static readonly primary: string #6C5CE7; static readonly primarySoft: string #ECE8FD; static readonly accent: string #9B8AF5; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }班级任务的主色是#6C5CE7深紫与班费管理的#00A862翡翠绿、通讯录的#0984E3亮蓝形成区分。紫色传递任务/协作/管理的色彩语义——任务管理是协调型应用紫色比绿色更中性、比蓝色更有调度感。primarySoft#ECE8FD是浅紫底色做头像背景。二、Index.etsTabs 容器与四 Tab 布局Tabs({ barPosition: BarPosition.End, index: this.current }) { TabContent() { HomeTab() }.tabBar(this.bar(首页, , 0)) TabContent() { Func1Tab() }.tabBar(this.bar(任务, ✏️, 1)) TabContent() { Func2Tab() }.tabBar(this.bar(进度, , 2)) TabContent() { ProfileTab() }.tabBar(this.bar(我的, , 3)) } .barBackgroundColor(#FFFFFF) .barHeight(60 this.safeBottom) .scrollable(false) .onChange((idx: number) { this.current idx; }) .width(100%).height(100%).backgroundColor(C.bg)四个 Tab首页()/任务(✏️)/进度()/我的()。任务管理的四个环节查看今日任务 → 创建新任务 → 查看成员进度 → 个人统计。三、Task interface 与 State tasks 数组interface Task { id: number; emoji: string; title: string; owner: string; deadline: string; done: boolean; }六个字段id是 key 锚点emoji是任务图标title是任务标题owner是负责人deadline是截止时间done是是否完成的布尔位。done是首页的核心状态字段——驱动勾选符号、标题颜色、删除线三态变化。State tasks: Task[] [ { id: 1, emoji: , title: 收齐班费并登记, owner: 生活委员, deadline: 今天, done: false }, { id: 2, emoji: , title: 发布运动会通知, owner: 宣传委员, deadline: 今天, done: true }, { id: 3, emoji: , title: 统计社会实践报名, owner: 学习委员, deadline: 明天, done: false }, { id: 4, emoji: , title: 筹备班级团建, owner: 文娱委员, deadline: 本周, done: false } ];State tasks是State修饰的数组——与普通private不同State让数组引用变化时触发 UI 刷新。四条任务1 项已完成发布运动会通知 3 项待完成。四、doneCount 与 toggle不可变更新模式private doneCount(): number { let n 0; this.tasks.forEach((t: Task) { if (t.done) { n; } }); return n; } private toggle(item: Task): void { item.done !item.done; this.tasks this.tasks.slice(); }doneCount()遍历tasks统计已完成数——每次调用都重新计算保证进度始终最新。toggle(item)是首页的核心交互方法——两步不可变更新// 1. 翻转 done 布尔位 item.done !item.done; // 2. slice() 生成新数组引用触发 State 刷新 this.tasks this.tasks.slice();slice()无参调用返回数组浅拷贝——新引用触发State重新渲染ProgressCard 的环形进度和 TaskList 的勾选态同步刷新。这是 ArkUI 中数组状态更新的标准范式。五、ProgressCardProgress 环形组件 渐变背景Builder ProgressCard() { Row({ space: 16 }) { Stack({ alignContent: Alignment.Center }) { Progress({ value: this.doneCount(), total: this.tasks.length, type: ProgressType.Ring }) .width(64).height(64).color(#FFFFFF).style({ strokeWidth: 6 }).backgroundColor(#44FFFFFF) Text(this.doneCount() / this.tasks.length).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) } Column({ space: 4 }) { Text(今日任务进度).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(还有 (this.tasks.length - this.doneCount()) 项待完成).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }Progress组件——系列首次出现的环形进度Progress({ value: this.doneCount(), total: this.tasks.length, type: ProgressType.Ring }) .width(64).height(64).color(#FFFFFF).style({ strokeWidth: 6 }).backgroundColor(#44FFFFFF)ProgressType.Ring环形进度条value是当前值doneCounttotal是总数tasks.length。color(#FFFFFF)白色进度环 backgroundColor(#44FFFFFF)半透明底环——在紫色渐变背景上白环可见。style({ strokeWidth: 6 })环宽 6px。Stack 叠加环形 Progress 中心文字1/4——Alignment.Center让文字居中在环内。右侧今日任务进度 还有 3 项待完成this.tasks.length - this.doneCount()动态计算待完成数。六、TaskListdone 驱动的勾选 删除线双态Builder TaskList() { Column({ space: 10 }) { ForEach(this.tasks, (t: Task) { Row({ space: 12 }) { Text(t.done ? ✅ : ⬜).fontSize(22).onClick(() { this.toggle(t); }) Column({ space: 4 }) { Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None }) Text(负责人: t.owner · t.deadline).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(t.emoji).fontSize(20) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (t: Task) t.id.toString()) }.width(100%) }done驱动三元变化——勾选符号、标题颜色、删除线三路分支// 勾选符号✅ vs ⬜ Text(t.done ? ✅ : ⬜) // 标题颜色灰色 vs 深色 .fontColor(t.done ? C.textDim : C.text) // 删除线有 vs 无 .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None })done true时 ✅ 灰色标题 删除线已完成视觉弱化done false时 ⬜ 深色标题 无删除线待完成视觉突出。TextDecorationType.LineThrough是 ArkUI 的删除线装饰——已完成任务的经典视觉表达。勾选符号onClick调this.toggle(t)——点击翻转doneslice()触发刷新ProgressCard 环形进度和 TaskList 勾选态同步更新。七、可演进方向方向现状改法收益任务创建静态 4 条接入任务 Tab 创建后追加任务动态新增数据持久State 内存Preferences 持久化重启不丢失过期检测无比对 deadline 与当前日期过期任务标红拖拽排序无ItemTouchHelper 拖拽任务优先级手动调整任务详情无 onClick点击进入详情页展示完整描述首页是班级任务的概览——ProgressCard 的环形进度 TaskList 的done驱动勾选双态。从toggle的不可变更新到TextDecorationType.LineThrough的删除线装饰每一层都有明确的职责边界。系列导航一首页· 二任务 · 三进度 · 四我的
