及时做APP开发实战(十七)-待办置顶与颜色标记本文将介绍如何实现待办列表的置顶显示和颜色标记功能提升用户体验。一、功能需求1.1 需求分析【图1待办列表置顶显示】┌─────────────────────────────────────┐ │ 及时做 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 进行中 已完成 全部 │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 学习ArkTS基础 │ │ ← 未完成红色标记 │ │ 2024-01-15 │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 开发及时做APP │ │ ← 未完成红色标记 │ │ 2024-01-15 × 2 │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 写博客文档 │ │ ← 已完成绿色标记 │ │ 2024-01-14 │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘1.2 功能点功能说明未完成置顶未完成的待办排在列表最前面颜色标记左侧显示状态颜色条排序规则同状态按创建时间倒序二、排序算法2.1 排序规则【图2颜色标记效果】排序规则 ┌─────────────────────────────────────┐ │ 1. 未完成的待办排在前面 │ │ 2. 已完成的待办排在后面 │ │ 3. 同状态按创建时间倒序 │ └─────────────────────────────────────┘ 示例 ┌─────────────────────────────────────┐ │ 原始顺序 │ │ ✓ 写博客已完成01-14 │ │ ☐ 学习ArkTS未完成01-15 │ │ ☐ 开发APP未完成01-15 │ │ ✓ 代码优化已完成01-13 │ │ │ │ 排序后 │ │ ☐ 开发APP未完成01-15← 置顶 │ │ ☐ 学习ArkTS未完成01-15 │ │ ✓ 写博客已完成01-14 │ │ ✓ 代码优化已完成01-13 │ └─────────────────────────────────────┘2.2 实现代码// 获取过滤后的列表未完成置顶getFilteredList():TodoItem[]{letfilteredList:TodoItem[];// 根据Tab过滤if(this.activeTab0){filteredList[...this.todoList];}elseif(this.activeTab1){filteredListthis.todoList.filter(item!item.completed);}else{filteredListthis.todoList.filter(itemitem.completed);}// 未完成的置顶显示按创建时间倒序returnfilteredList.sort((a,b){if(a.completed!b.completed){returna.completed?1:-1;// 未完成的排前面}returnb.createdAt-a.createdAt;// 同状态按创建时间倒序});}2.3 排序逻辑详解┌─────────────────────────────────────┐ │ 排序逻辑 │ ├─────────────────────────────────────┤ │ sort((a, b) { │ │ // 1. 先比较完成状态 │ │ if (a.completed ! b.completed) │ │ return a.completed ? 1 : -1; │ │ // a已完成 → 返回1a排后面 │ │ // a未完成 → 返回-1a排前面 │ │ } │ │ │ │ // 2. 同状态比较创建时间 │ │ return b.createdAt - a.createdAt;│ │ // 时间戳大的排前面倒序 │ │ }) │ └─────────────────────────────────────┘三、颜色标记实现3.1 标记颜色设计颜色方案 ┌─────────────────────────────────────┐ │ 未完成#FF6B6B红色 │ │ 已完成#4CAF50绿色 │ └─────────────────────────────────────┘ 视觉效果 ┌─────────────────────────────┐ │▌ 学习ArkTS基础 │ ← 红色条 │▌ 2024-01-15 │ └─────────────────────────────┘ ┌─────────────────────────────┐ │▌ 写博客文档 │ ← 绿色条 │▌ 2024-01-14 │ └─────────────────────────────┘3.2 实现代码BuilderTodoItem(todo:TodoItem){Row(){// 标记颜色条Column().width(4).height(100%).backgroundColor(todo.completed?#4CAF50:#FF6B6B).borderRadius({topLeft:4,bottomLeft:4})Column(){Row(){// 完成状态复选框Checkbox().select(todo.completed).selectedColor(#4CAF50).width(24).height(24).margin({right:12}).onChange((isChecked:boolean){this.toggleTodo(todo.id);})// 待办内容Column(){Text(todo.text).fontSize(16).fontColor(todo.completed?#999999:#333333).decoration({type:todo.completed?TextDecorationType.LineThrough:TextDecorationType.None})Row(){Text(DateTimeUtil.formatDate(todo.createdAt)).fontSize(12).fontColor(#999999)if(todo.pomodoroCount0){Text( ×${todo.pomodoroCount}).fontSize(12).fontColor(#FF6B6B).margin({left:10})}}.margin({top:5})}.layoutWeight(1).alignItems(HorizontalAlign.Start)// 删除按钮Button(删除).fontSize(12).height(28).backgroundColor(#FF4444).fontColor(#FFFFFF).borderRadius(14).onClick((){this.deleteTodo(todo.id);})}.width(100%)}.layoutWeight(1).padding({left:12,right:15,top:15,bottom:15})}.width(100%).backgroundColor(#FFFFFF).borderRadius(8).clip(true).shadow({radius:2,color:#E0E0E0,offsetX:0,offsetY:2})}3.3 关键属性属性说明width(4)标记条宽度height(‘100%’)标记条高度撑满backgroundColor根据状态设置颜色borderRadius左侧圆角clip(true)裁剪圆角四、布局结构4.1 组件结构┌─────────────────────────────────────┐ │ Row容器 │ ├─────────────────────────────────────┤ │ ┌────┬────────────────────────┐ │ │ │标记│ Column内容 │ │ │ │条 │ ┌──────────────────┐ │ │ │ │ │ │ Row主体 │ │ │ │ │ │ │ ☐ 待办内容 删除 │ │ │ │ │ │ └──────────────────┘ │ │ │ └────┴────────────────────────┘ │ └─────────────────────────────────────┘4.2 布局代码Row(){// 左侧标记条Column().width(4).height(100%).backgroundColor(...)// 右侧内容区Column(){Row(){Checkbox()// 复选框Column(){// 待办内容Text()// 标题Row()// 日期和番茄钟数}Button()// 删除按钮}}.layoutWeight(1).padding(...)}.borderRadius(8).clip(true)// 裁剪圆角五、效果对比5.1 修改前┌─────────────────────────────────────┐ │ ☐ 学习ArkTS基础 │ │ 2024-01-15 │ ├─────────────────────────────────────┤ │ ✓ 写博客文档 │ │ 2024-01-14 │ ├─────────────────────────────────────┤ │ ☐ 开发APP │ │ 2024-01-15 │ ├─────────────────────────────────────┤ │ ✓ 代码优化 │ │ 2024-01-13 │ └─────────────────────────────────────┘ ❌ 已完成和未完成混在一起 ❌ 没有视觉区分5.2 修改后┌─────────────────────────────────────┐ │▌ 开发APP 删除 │ ← 红色标记 │▌ 2024-01-15 │ ├─────────────────────────────────────┤ │▌ 学习ArkTS基础 删除 │ ← 红色标记 │▌ 2024-01-15 │ ├─────────────────────────────────────┤ │▌ 写博客文档 删除 │ ← 绿色标记 │▌ 2024-01-14 │ ├─────────────────────────────────────┤ │▌ 代码优化 删除 │ ← 绿色标记 │▌ 2024-01-13 │ └─────────────────────────────────────┘ ✅ 未完成置顶显示 ✅ 颜色标记清晰区分六、最佳实践6.1 排序原则┌─────────────────────────────────────┐ │ 排序原则 │ ├─────────────────────────────────────┤ │ □ 重要项置顶 │ │ □ 同类项按时间排序 │ │ □ 保持用户预期 │ │ □ 避免频繁变化 │ └─────────────────────────────────────┘6.2 颜色设计原则┌─────────────────────────────────────┐ │ 颜色设计原则 │ ├─────────────────────────────────────┤ │ □ 颜色含义明确 │ │ □ 对比度适中 │ │ □ 符合用户认知 │ │ □ 考虑色盲用户 │ └─────────────────────────────────────┘ 常用颜色含义 - 红色未完成、重要、警告 - 绿色已完成、成功、安全 - 蓝色信息、链接 - 黄色提醒、注意七、总结本文实现了待办列表的置顶显示和颜色标记功能核心要点排序算法未完成置顶同状态按时间倒序颜色标记红色表示未完成绿色表示已完成布局优化左侧标记条右侧内容区用户体验视觉区分清晰操作直观