鸿蒙原生应用 HarmonyOS ArkTS实战一条竖线串记录 —— 项目详情页的任务看板真交互App 24「科研项目管理」项目 TabFunc1Tab是项目详情/任务看板页——5 团队成员列表emoji 头像 姓名 角色 任务数 5 任务看板✅/⬜ 真交互切换 完成态划线删除线 优先级高/中/低三色标签 Toast 反馈。本篇基于24-research-mgmt/entry/src/main/ets/pages/Func1Tab.ets约 120 行逐段拆解附 4 张实机截图。一、整体结构团队 任务看板Func1Tab 是项目详情的 2 模块布局——团队成员 任务看板build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.TeamCard() this.SectionTitle(任务看板) this.TaskList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构Header— 项目详情标题TeamCard— 5 团队成员SectionTitle(任务看板) TaskList— 5 任务真交互团队 任务是项目管理的 2 大要素——谁在做事团队 做什么事任务——项目管理的完整闭环。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是项目详情单行与系列同款height(safeTop 56) 靠底对齐Builder Header() { Row() { Text(项目详情) .fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56) .padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card) .alignItems(VerticalAlign.Bottom) }项目详情是 Tab 内页面标题——Tab 内页面与 Tab 名称可能不同如 Tab 是项目、页面是项目详情——页面标题比Tab 标题更具体。三、TeamCard5 团队成员TeamCard 是5 团队成员的列表展示——emoji 头像 姓名 角色 任务数Builder TeamCard() { Column({ space: 12 }) { Text(团队成员).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) ForEach(this.members, (m: Member) { Row({ space: 12 }) { Text(m.avatar).fontSize(24) Column({ space: 3 }) { Text(m.name).fontSize(14).fontColor(C.text) Text(m.role).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(m.tasks 任务).fontSize(12).fontColor(C.primary) }.width(100%) }, (m: Member) m.id.toString()) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }3.1 5 团队成员数据private members: Member[] [ { id: 1, avatar: , name: 张三, role: 负责人, tasks: 5 }, { id: 2, avatar: , name: 李四, role: 算法, tasks: 8 }, { id: 3, avatar: , name: 王五, role: 开发, tasks: 6 }, { id: 4, avatar: , name: 赵六, role: 实验, tasks: 4 }, { id: 5, avatar: , name: 孙七, role: 数据分析, tasks: 3 } ];5 团队成员覆盖科研项目核心角色成员角色任务数职责 张三负责人5项目统筹 李四算法8最多算法核心 王五开发6系统实现 赵六实验4实验设计 孙七数据分析3数据处理5 角色 科研项目最小团队负责人/算法/开发/实验/数据——完整科研团队的 5 大职能。任务数总和58643 26 ——与项目详情默认 5 任务不对应——**全员 26 任务 ≠ 当前项目 5 任务**说明成员是团队整体不是本项目专属——真实项目应过滤本项目成员的任务——demo 简化了。3.2 成员卡的 4 元素每行 4 信息emoji 头像24sp—— 不用真实头像用 emoji开发简化姓名14sp 深色角色11sp 灰—— 负责人/算法/开发/实验/数据分析任务数12sp 靛蓝—— 5 任务 / 8 任务任务数用靛蓝——数据指标 品牌色的统一色与统计 3 栏同色——**工作负载可视化**让用户一眼看出李四 8 任务是最忙的。四、SectionTitle参数化无新建SectionTitle 是参数化标题比首页简洁无右侧新建Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) }.width(100%) }任务看板无新建按钮——项目内的任务由项目创建者添加不在本页面真实项目应有分配任务按钮但 demo 简化了——任务看板的入口是分配不是新建。五、TaskList5 任务看板真交互 完成态 优先级三色TaskList 是 5 任务的看板核心交互是 ⬜/✅ 切换 完成态删除线 优先级三色标签Builder TaskList() { Column({ space: 10 }) { ForEach(this.tasks, (t: Task) { Row({ space: 12 }) { Text(t.done ? ✅ : ⬜).fontSize(20) .onClick(() { t.done !t.done; promptAction.showToast({ message: t.done ? 完成 : 取消完成 }); }) Column({ space: 3 }) { Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None }) Text(t.assignee).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(t.priority).fontSize(11).fontColor(t.color) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(t.color 20).borderRadius(4) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (t: Task) t.id.toString()) }.width(100%) }5.1 5 任务数据State tasks: Task[] [ { id: 1, title: 数据集标注与清洗, assignee: 李四, done: true, priority: 高, color: C.danger }, { id: 2, title: 模型架构设计, assignee: 王五, done: true, priority: 高, color: C.danger }, { id: 3, title: 实验对比方案撰写, assignee: 赵六, done: false, priority: 中, color: C.warn }, { id: 4, title: 论文初稿撰写, assignee: 张三, done: false, priority: 高, color: C.danger }, { id: 5, title: 可视化图表制作, assignee: 孙七, done: false, priority: 低, color: C.ok } ];5 任务的3 状态 3 优先级任务负责人完成态优先级颜色数据集标注与清洗李四✅ 已完成高红C.danger模型架构设计王五✅ 已完成高红C.danger实验对比方案撰写赵六⬜ 未完成中橙C.warn论文初稿撰写张三⬜ 未完成高红C.danger可视化图表制作孙七⬜ 未完成低绿C.ok2 已完成 3 未完成 40% 进度与首页深度学习 65%的进度不一致——首页是 4 个项目的整体进度项目详情是单个项目的任务进度——进度在不同 Tab 含义不同——真实项目应统一口径。优先级三色高 → 红C.danger— 紧急/重要中 → 橙C.warn— 警告低 → 绿C.ok— 平静/不急优先级三色映射与系列状态色编码同款绿不急、橙警示、红紧急——高红看似违和紧急警示橙——但 App 24 用了红高优先级——高优先级 红色是任务管理工具的通用映射如 Jira/Asana 高优先级是红色——与状态色不同语义。5.2 ✅/⬜ 真交互核心Text(t.done ? ✅ : ⬜).fontSize(20) .onClick(() { t.done !t.done; promptAction.showToast({ message: t.done ? 完成 : 取消完成 }); })真交互流程用户点击 ⬜/✅ 文本t.done !t.done翻转true↔falseToast 反馈完成/取消完成注意直接修改t.done字段——ArkUI 的State tasks: Task[]是响应式数组State装饰器使t.done !t.done的字段修改能触发 UI 重渲染——State对数组元素的字段级修改同样有效ArkUI 的State深度观测机制——这是规范的响应式写法。Text(t.done ? ✅ : ⬜)三元文字切换done true→ ✅已完成done false→ ⬜未完成✅/⬜ 字符切换是项目管理的经典符号ToDo List/任务管理 App 通用。5.3 完成态的文字删除线效果Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None })decoration({ type: TextDecorationType.LineThrough })——完成态加删除线——**删除线 划掉 已完成**是文字的视觉约定。配合颜色变化未完成深色C.text强调已完成灰色C.textDim 删除线弱化颜色 删除线双通道完成态视觉——比单纯加删除线更强烈——**灰字 删除线 已完成**是 ToDo 列表的标准。5.4 优先级三色标签的20 透明度背景Text(t.priority).fontSize(11).fontColor(t.color) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(t.color 20).borderRadius(4)t.color 20—— 颜色码 2012.5% 透明度 12.5% 透明度的同色背景——高 红字淡红底、中 橙字淡橙底、低 绿字淡绿底——**文字深、背景浅**的胶囊配色。20是 16 进制透明度FF100%, 8050%, 2012.5%——比1A10%稍深——足够浅不抢戏、足够深可读——优先级标签的半透明背景配色法。六、State 与任务管理数据模型Func1Tab 有1 个 Statetasks任务数组——TaskList 通过State tasks的t.done !t.done字段修改实现交互。1 State 任务管理——State tasks驱动任务看板的完成态切换。State对数组元素的字段修改t.done !t.done能触发 UI 重渲染——ArkUI 的State深度观测机制使数组元素的属性变更也能被捕获。真实项目的进阶写法整体替换元素确保渲染可靠State tasks: Task[] [...]; toggleTask(id: number) { const idx this.tasks.findIndex(t t.id id); this.tasks[idx] { ...this.tasks[idx], done: !this.tasks[idx].done }; // 整体替换元素确保触发渲染 }字段修改 整体替换都是 ArkUI 数组的响应式写法——demo 用字段修改t.done !t.done已能工作整体替换是更保险的写法。七、任务管理与系列其他勾选对比App勾选元素状态切换完成态视觉App 22 投票⬜/✅单选picked高亮 背景变紫App 24 任务⬜/✅多选5 个独立删除线 灰色App 18 兴趣⬜ 圆点多选toggle变实心✅/⬜ 字符的 3 种应用App 22 投票单选互斥点 A 取消 BApp 24 任务多选独立每个任务可独立完成App 18 兴趣多选累积选 N 个保留全部✅/⬜ 是最通用的勾选符号——单选/多选/独立/累积都适用——任务管理是最适合 ✅/⬜ 的场景每条任务独立完成。八、任务卡与项目卡信息密度对比元素首页项目卡项目详情任务卡视觉锚点52×52 emoji⬜/✅ 字符名称14sp 名称 12sp 团队/状态14sp 标题完成态删除线 11sp 负责人进度Progress 进度条 %优先级三色标签状态进行中/结题中/启动期完成/未完成 优先级行动点击弹 Toast点击 ⬜/✅切换状态项目卡 概览——看项目——只读点击只 Toast任务卡 行动——完成任务——可交互点击切换状态概览 vs 行动是不同卡片的交互深度——任务卡比项目卡交互更深任务有勾选完成的明确动作——交互深度跟随用户行动。九、任务完成度与项目进度的双层关系App 24 的项目卡进度 65% 和项目详情任务完成度2/5 40%——项目进度 ≠ 任务完成度项目进度 65%—— 项目整体推进程度多维度阶段/进度/成果任务完成度 40%—— 单个项目的任务完成比例项目进度的组成项目进度 f(任务完成度, 阶段, 预算, 成果)真实项目的任务完成 → 项目进度自动更新任务 1 ✅ 完成 → 项目进度 10%任务 2 ✅ 完成 → 项目进度 15%任务 3 标记 30% 进行中 → 项目进度 5%累计 → 项目进度 30%任务完成自动推项目进度——单一事实来源任务状态 → 项目进度——真实项目应任务改变触发项目重算——数据驱动的项目管理比手动更新进度更可靠。App 24 的首页 65% vs 项目详情 40%—— 是两个不同项目的进度首页 4 个项目整体项目详情默认第一个项目——真实项目应点项目进对应详情——目前是 demo 简化。十、任务看板的4 列视图 vs 列表视图App 24 的任务看板是列表视图每行 1 任务——真实项目管理常用看板视图4 列待办/进行中/已完成/已取消列状态视觉待办⬜ 未开始浅色进行中 进行中等色已完成✅ 完成绿色完成态已取消❌ 取消灰色看板视图vs列表视图列表App 24 当前任务按时间/优先级排序看全部任务看板Trello/Asana任务按状态分列看各状态的任务列表看全部、看板看分组—— 两种视图适合不同场景管理进度用看板哪些待办、哪些已完成完成任务用列表我下一步做什么真实项目应支持 2 种视图切换——App 24 是简化的列表视图——看板 4 列是项目管理工具的标配。完成删除线——删除线 划掉 完成—— 跨语言/跨文化的视觉约定英语 ✓、中文 ✗、日文 ✓——✅/⬜ 删除线 灰色是完成态三件套。十一、State 响应式机制与 ArkUI 深度观测App 24 项目详情页的核心交互——点击 ⬜/✅ 切换任务完成态——依赖 ArkUI 的State响应式机制。State tasks: Task[]装饰的数组其元素属性变更t.done !t.done能被框架捕获并触发 UI 重渲染。ArkUIState的观测层级第一层数组本身的增删push/splice→ 触发渲染第二层数组元素的字段修改t.done !t.done→ArkUI 的State深度观测能捕获第三层嵌套对象的字段修改 → 需要整体替换App 24 用的是第二层——直接修改数组元素的done字段——这是 ArkUIState对State装饰的 class/interface 数组的深度观测能力——简单数据结构interface Task 的 boolean 字段无需整体替换。深度观测的边界State装饰的Task[]interface 数组→ 元素字段修改可观测 ✅State装饰的嵌套对象如Task.subtasks: SubTask[]→ 嵌套数组的字段修改可能不可观测 ⚠️复杂场景推荐整体替换元素this.tasks[idx] { ...this.tasks[idx], done: !done }确保渲染demo 用字段修改、生产用整体替换——demo 的t.done !t.done简洁直观适合教学生产环境的整体替换更保险适合复杂场景。两者都是 ArkUI 的合法响应式写法。十二、总结App 24 项目详情页解析完毕。5 团队成员角色 任务数 5 任务看板✅/⬜ 真交互 完成删除线 优先级三色是核心组件。✅/⬜ 删除线 灰色 完成态是任务管理 ToDo List 的标准三件套。优先级三色高红/中橙/低绿与系列状态色语义不同——高红任务管理工具的通用映射。1 Statetasks驱动任务看板——State对数组元素字段修改的深度观测使完成态切换即时响应。项目 概览与任务 行动的卡片交互深度差异是项目管理的设计要点。**任务完成度 → 项目进度自动更新、列表 vs 看板、3 大勾选模式**是进阶设计。 
长河君 · 2026/9/9 18:45:52 · 阅读 1.2k 鸿蒙原生应用 HarmonyOS ArkTS实战：一条竖线串记录 —— 项目详情页的任务看板真交互
鸿蒙原生应用 HarmonyOS ArkTS实战一条竖线串记录 —— 项目详情页的任务看板真交互App 24「科研项目管理」项目 TabFunc1Tab是项目详情/任务看板页——5 团队成员列表emoji 头像 姓名 角色 任务数 5 任务看板✅/⬜ 真交互切换 完成态划线删除线 优先级高/中/低三色标签 Toast 反馈。本篇基于24-research-mgmt/entry/src/main/ets/pages/Func1Tab.ets约 120 行逐段拆解附 4 张实机截图。一、整体结构团队 任务看板Func1Tab 是项目详情的 2 模块布局——团队成员 任务看板build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.TeamCard() this.SectionTitle(任务看板) this.TaskList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构Header— 项目详情标题TeamCard— 5 团队成员SectionTitle(任务看板) TaskList— 5 任务真交互团队 任务是项目管理的 2 大要素——谁在做事团队 做什么事任务——项目管理的完整闭环。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是项目详情单行与系列同款height(safeTop 56) 靠底对齐Builder Header() { Row() { Text(项目详情) .fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56) .padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card) .alignItems(VerticalAlign.Bottom) }项目详情是 Tab 内页面标题——Tab 内页面与 Tab 名称可能不同如 Tab 是项目、页面是项目详情——页面标题比Tab 标题更具体。三、TeamCard5 团队成员TeamCard 是5 团队成员的列表展示——emoji 头像 姓名 角色 任务数Builder TeamCard() { Column({ space: 12 }) { Text(团队成员).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) ForEach(this.members, (m: Member) { Row({ space: 12 }) { Text(m.avatar).fontSize(24) Column({ space: 3 }) { Text(m.name).fontSize(14).fontColor(C.text) Text(m.role).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(m.tasks 任务).fontSize(12).fontColor(C.primary) }.width(100%) }, (m: Member) m.id.toString()) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }3.1 5 团队成员数据private members: Member[] [ { id: 1, avatar: , name: 张三, role: 负责人, tasks: 5 }, { id: 2, avatar: , name: 李四, role: 算法, tasks: 8 }, { id: 3, avatar: , name: 王五, role: 开发, tasks: 6 }, { id: 4, avatar: , name: 赵六, role: 实验, tasks: 4 }, { id: 5, avatar: , name: 孙七, role: 数据分析, tasks: 3 } ];5 团队成员覆盖科研项目核心角色成员角色任务数职责 张三负责人5项目统筹 李四算法8最多算法核心 王五开发6系统实现 赵六实验4实验设计 孙七数据分析3数据处理5 角色 科研项目最小团队负责人/算法/开发/实验/数据——完整科研团队的 5 大职能。任务数总和58643 26 ——与项目详情默认 5 任务不对应——**全员 26 任务 ≠ 当前项目 5 任务**说明成员是团队整体不是本项目专属——真实项目应过滤本项目成员的任务——demo 简化了。3.2 成员卡的 4 元素每行 4 信息emoji 头像24sp—— 不用真实头像用 emoji开发简化姓名14sp 深色角色11sp 灰—— 负责人/算法/开发/实验/数据分析任务数12sp 靛蓝—— 5 任务 / 8 任务任务数用靛蓝——数据指标 品牌色的统一色与统计 3 栏同色——**工作负载可视化**让用户一眼看出李四 8 任务是最忙的。四、SectionTitle参数化无新建SectionTitle 是参数化标题比首页简洁无右侧新建Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) }.width(100%) }任务看板无新建按钮——项目内的任务由项目创建者添加不在本页面真实项目应有分配任务按钮但 demo 简化了——任务看板的入口是分配不是新建。五、TaskList5 任务看板真交互 完成态 优先级三色TaskList 是 5 任务的看板核心交互是 ⬜/✅ 切换 完成态删除线 优先级三色标签Builder TaskList() { Column({ space: 10 }) { ForEach(this.tasks, (t: Task) { Row({ space: 12 }) { Text(t.done ? ✅ : ⬜).fontSize(20) .onClick(() { t.done !t.done; promptAction.showToast({ message: t.done ? 完成 : 取消完成 }); }) Column({ space: 3 }) { Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None }) Text(t.assignee).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(t.priority).fontSize(11).fontColor(t.color) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(t.color 20).borderRadius(4) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (t: Task) t.id.toString()) }.width(100%) }5.1 5 任务数据State tasks: Task[] [ { id: 1, title: 数据集标注与清洗, assignee: 李四, done: true, priority: 高, color: C.danger }, { id: 2, title: 模型架构设计, assignee: 王五, done: true, priority: 高, color: C.danger }, { id: 3, title: 实验对比方案撰写, assignee: 赵六, done: false, priority: 中, color: C.warn }, { id: 4, title: 论文初稿撰写, assignee: 张三, done: false, priority: 高, color: C.danger }, { id: 5, title: 可视化图表制作, assignee: 孙七, done: false, priority: 低, color: C.ok } ];5 任务的3 状态 3 优先级任务负责人完成态优先级颜色数据集标注与清洗李四✅ 已完成高红C.danger模型架构设计王五✅ 已完成高红C.danger实验对比方案撰写赵六⬜ 未完成中橙C.warn论文初稿撰写张三⬜ 未完成高红C.danger可视化图表制作孙七⬜ 未完成低绿C.ok2 已完成 3 未完成 40% 进度与首页深度学习 65%的进度不一致——首页是 4 个项目的整体进度项目详情是单个项目的任务进度——进度在不同 Tab 含义不同——真实项目应统一口径。优先级三色高 → 红C.danger— 紧急/重要中 → 橙C.warn— 警告低 → 绿C.ok— 平静/不急优先级三色映射与系列状态色编码同款绿不急、橙警示、红紧急——高红看似违和紧急警示橙——但 App 24 用了红高优先级——高优先级 红色是任务管理工具的通用映射如 Jira/Asana 高优先级是红色——与状态色不同语义。5.2 ✅/⬜ 真交互核心Text(t.done ? ✅ : ⬜).fontSize(20) .onClick(() { t.done !t.done; promptAction.showToast({ message: t.done ? 完成 : 取消完成 }); })真交互流程用户点击 ⬜/✅ 文本t.done !t.done翻转true↔falseToast 反馈完成/取消完成注意直接修改t.done字段——ArkUI 的State tasks: Task[]是响应式数组State装饰器使t.done !t.done的字段修改能触发 UI 重渲染——State对数组元素的字段级修改同样有效ArkUI 的State深度观测机制——这是规范的响应式写法。Text(t.done ? ✅ : ⬜)三元文字切换done true→ ✅已完成done false→ ⬜未完成✅/⬜ 字符切换是项目管理的经典符号ToDo List/任务管理 App 通用。5.3 完成态的文字删除线效果Text(t.title).fontSize(14).fontColor(t.done ? C.textDim : C.text) .decoration({ type: t.done ? TextDecorationType.LineThrough : TextDecorationType.None })decoration({ type: TextDecorationType.LineThrough })——完成态加删除线——**删除线 划掉 已完成**是文字的视觉约定。配合颜色变化未完成深色C.text强调已完成灰色C.textDim 删除线弱化颜色 删除线双通道完成态视觉——比单纯加删除线更强烈——**灰字 删除线 已完成**是 ToDo 列表的标准。5.4 优先级三色标签的20 透明度背景Text(t.priority).fontSize(11).fontColor(t.color) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(t.color 20).borderRadius(4)t.color 20—— 颜色码 2012.5% 透明度 12.5% 透明度的同色背景——高 红字淡红底、中 橙字淡橙底、低 绿字淡绿底——**文字深、背景浅**的胶囊配色。20是 16 进制透明度FF100%, 8050%, 2012.5%——比1A10%稍深——足够浅不抢戏、足够深可读——优先级标签的半透明背景配色法。六、State 与任务管理数据模型Func1Tab 有1 个 Statetasks任务数组——TaskList 通过State tasks的t.done !t.done字段修改实现交互。1 State 任务管理——State tasks驱动任务看板的完成态切换。State对数组元素的字段修改t.done !t.done能触发 UI 重渲染——ArkUI 的State深度观测机制使数组元素的属性变更也能被捕获。真实项目的进阶写法整体替换元素确保渲染可靠State tasks: Task[] [...]; toggleTask(id: number) { const idx this.tasks.findIndex(t t.id id); this.tasks[idx] { ...this.tasks[idx], done: !this.tasks[idx].done }; // 整体替换元素确保触发渲染 }字段修改 整体替换都是 ArkUI 数组的响应式写法——demo 用字段修改t.done !t.done已能工作整体替换是更保险的写法。七、任务管理与系列其他勾选对比App勾选元素状态切换完成态视觉App 22 投票⬜/✅单选picked高亮 背景变紫App 24 任务⬜/✅多选5 个独立删除线 灰色App 18 兴趣⬜ 圆点多选toggle变实心✅/⬜ 字符的 3 种应用App 22 投票单选互斥点 A 取消 BApp 24 任务多选独立每个任务可独立完成App 18 兴趣多选累积选 N 个保留全部✅/⬜ 是最通用的勾选符号——单选/多选/独立/累积都适用——任务管理是最适合 ✅/⬜ 的场景每条任务独立完成。八、任务卡与项目卡信息密度对比元素首页项目卡项目详情任务卡视觉锚点52×52 emoji⬜/✅ 字符名称14sp 名称 12sp 团队/状态14sp 标题完成态删除线 11sp 负责人进度Progress 进度条 %优先级三色标签状态进行中/结题中/启动期完成/未完成 优先级行动点击弹 Toast点击 ⬜/✅切换状态项目卡 概览——看项目——只读点击只 Toast任务卡 行动——完成任务——可交互点击切换状态概览 vs 行动是不同卡片的交互深度——任务卡比项目卡交互更深任务有勾选完成的明确动作——交互深度跟随用户行动。九、任务完成度与项目进度的双层关系App 24 的项目卡进度 65% 和项目详情任务完成度2/5 40%——项目进度 ≠ 任务完成度项目进度 65%—— 项目整体推进程度多维度阶段/进度/成果任务完成度 40%—— 单个项目的任务完成比例项目进度的组成项目进度 f(任务完成度, 阶段, 预算, 成果)真实项目的任务完成 → 项目进度自动更新任务 1 ✅ 完成 → 项目进度 10%任务 2 ✅ 完成 → 项目进度 15%任务 3 标记 30% 进行中 → 项目进度 5%累计 → 项目进度 30%任务完成自动推项目进度——单一事实来源任务状态 → 项目进度——真实项目应任务改变触发项目重算——数据驱动的项目管理比手动更新进度更可靠。App 24 的首页 65% vs 项目详情 40%—— 是两个不同项目的进度首页 4 个项目整体项目详情默认第一个项目——真实项目应点项目进对应详情——目前是 demo 简化。十、任务看板的4 列视图 vs 列表视图App 24 的任务看板是列表视图每行 1 任务——真实项目管理常用看板视图4 列待办/进行中/已完成/已取消列状态视觉待办⬜ 未开始浅色进行中 进行中等色已完成✅ 完成绿色完成态已取消❌ 取消灰色看板视图vs列表视图列表App 24 当前任务按时间/优先级排序看全部任务看板Trello/Asana任务按状态分列看各状态的任务列表看全部、看板看分组—— 两种视图适合不同场景管理进度用看板哪些待办、哪些已完成完成任务用列表我下一步做什么真实项目应支持 2 种视图切换——App 24 是简化的列表视图——看板 4 列是项目管理工具的标配。完成删除线——删除线 划掉 完成—— 跨语言/跨文化的视觉约定英语 ✓、中文 ✗、日文 ✓——✅/⬜ 删除线 灰色是完成态三件套。十一、State 响应式机制与 ArkUI 深度观测App 24 项目详情页的核心交互——点击 ⬜/✅ 切换任务完成态——依赖 ArkUI 的State响应式机制。State tasks: Task[]装饰的数组其元素属性变更t.done !t.done能被框架捕获并触发 UI 重渲染。ArkUIState的观测层级第一层数组本身的增删push/splice→ 触发渲染第二层数组元素的字段修改t.done !t.done→ArkUI 的State深度观测能捕获第三层嵌套对象的字段修改 → 需要整体替换App 24 用的是第二层——直接修改数组元素的done字段——这是 ArkUIState对State装饰的 class/interface 数组的深度观测能力——简单数据结构interface Task 的 boolean 字段无需整体替换。深度观测的边界State装饰的Task[]interface 数组→ 元素字段修改可观测 ✅State装饰的嵌套对象如Task.subtasks: SubTask[]→ 嵌套数组的字段修改可能不可观测 ⚠️复杂场景推荐整体替换元素this.tasks[idx] { ...this.tasks[idx], done: !done }确保渲染demo 用字段修改、生产用整体替换——demo 的t.done !t.done简洁直观适合教学生产环境的整体替换更保险适合复杂场景。两者都是 ArkUI 的合法响应式写法。十二、总结App 24 项目详情页解析完毕。5 团队成员角色 任务数 5 任务看板✅/⬜ 真交互 完成删除线 优先级三色是核心组件。✅/⬜ 删除线 灰色 完成态是任务管理 ToDo List 的标准三件套。优先级三色高红/中橙/低绿与系列状态色语义不同——高红任务管理工具的通用映射。1 Statetasks驱动任务看板——State对数组元素字段修改的深度观测使完成态切换即时响应。项目 概览与任务 行动的卡片交互深度差异是项目管理的设计要点。**任务完成度 → 项目进度自动更新、列表 vs 看板、3 大勾选模式**是进阶设计。