#跟着晓明学鸿蒙# HarmonyOS NEXT徽章组件:任务进度指示器多任务管理
·
目录
- 案例介绍
- 代码实现
- 代码详解
- 多任务数据结构
- 任务优先级管理
- 整体任务进度统计
- 子任务进度管理
- 任务状态联动机制
- 总结
案例介绍
本篇文章是任务进度指示器系列的第三篇,将重点介绍如何使用HarmonyOS NEXT的Badge组件实现多任务管理功能。我们将扩展现有应用,添加更多任务类型和整体进度统计,使用户能够全面管理不同类型和优先级的任务。这种功能在项目管理、团队协作和个人效率工具中非常实用,可以帮助用户更好地规划和跟踪多个并行任务。
代码实现
@Entry
@Component
struct TaskProgressIndicator {
// 任务列表数据
@State tasks: Array<{
id: number,
title: string,
description: string,
deadline: string,
priority: 'high' | 'medium' | 'low',
completed: boolean,
subtasks: Array<{
id: number,
title: string,
completed: boolean
}>
}> = [
{
id: 1,
title: '项目规划',
description: '制定项目开发计划和时间表',
deadline: '2024-03-01',
priority: 'high',
completed: false,
subtasks: [
{ id: 11, title: '需求分析', completed: true },
{ id: 12, title: '技术选型', completed: true },
{ id: 13, title: '进度安排', completed: false },
{ id: 14, title: '资源分配', completed: false }
]
},
{
id: 2,
title: '功能开发',
description: '实现核心功能模块',
deadline: '2024-03-15',
priority: 'high',
completed: false,
subtasks: [
{ id: 21, title: '用户认证', completed: true },
{ id: 22, title: '数据存储', completed: false },
{ id: 23, title: '业务逻辑', completed: false }
]
},
{
id: 3,
title: '测试验证',
description: '进行功能测试和性能测试',
deadline: '2024-03-20',
priority: 'medium',
completed: false,
subtasks: [
{ id: 31, title: '单元测试', completed: false },
{ id: 32, title: '集成测试', completed: false }
]
}
]
// 优先级颜色映射
private priorityColors = {
high: '#FF3B30',
medium: '#FF9500',
low: '#34C759'
}
build() {
Column() {
// 标题栏
Row() {
Text('任务管理')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Blank()
Badge({
count: this.getUncompletedTaskCount(),
position: BadgePosition.Right,
style: {
backgroundColor: '#FF3B30',
borderRadius: 10
}
}) {
Text('待完成')
.fontSize(16)
.fontColor('#666')
}
}
.width('100%')
.padding(20)
.backgroundColor(Color.White)
// 任务列表
List() {
ForEach(this.tasks, (task) => {
ListItem() {
Column() {
// 任务标题行
Row() {
Text(task.title)
.fontSize(18)
.fontWeight(FontWeight.Medium)
Blank()
Badge({
value: this.getPriorityText(task.priority),
style: {
backgroundColor: this.priorityColors[task.priority],
borderRadius: 5,
padding: 4
}
}) {}
}
.width('100%')
// 任务描述
Text(task.description)
.fontSize(14)
.fontColor('#666')
.margin({ top: 5 })
// 截止日期
Text(`截止日期:${task.deadline}`)
.fontSize(14)
.fontColor('#999')
.margin({ top: 5 })
// 子任务进度
Row() {
Text('子任务进度:')
.fontSize(14)
.fontColor('#666')
Badge({
value: `${this.getCompletedSubtaskCount(task)}/${task.subtasks.length}`,
style: {
backgroundColor: this.getProgressColor(task),
borderRadius: 10,
padding: 4
}
}) {}
}
.margin({ top: 10 })
// 子任务列表
Column({ space: 10 }) {
ForEach(task.subtasks, (subtask) => {
Row() {
Checkbox()
.select(subtask.completed)
.onChange((value: boolean) => {
subtask.completed = value
this.updateTaskStatus(task)
})
Text(subtask.title)
.fontSize(14)
.fontColor(subtask.completed ? '#999' : '#333')
.decoration({ type: subtask.completed ?
TextDecorationType.LineThrough : TextDecorationType.None })
}
})
}
.margin({ top: 10 })
}
.width('100%')
.padding(15)
.backgroundColor(Color.White)
.borderRadius(10)
.margin({ bottom: 10 })
}
})
}
.width('100%')
.layoutWeight(1)
.padding({ left: 20, right: 20 })
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')
}
// 获取未完成任务数量
private getUncompletedTaskCount(): number {
return this.tasks.filter(task => !task.completed).length
}
// 获取优先级文本
private getPriorityText(priority: string): string {
const priorityMap = {
high: '高优先级',
medium: '中优先级',
low: '低优先级'
}
return priorityMap[priority]
}
// 获取已完成子任务数量
private getCompletedSubtaskCount(task: any): number {
return task.subtasks.filter(subtask => subtask.completed).length
}
// 获取进度颜色
private getProgressColor(task: any): string {
const completedCount = this.getCompletedSubtaskCount(task)
const totalCount = task.subtasks.length
if (completedCount === totalCount) return '#34C759'
if (completedCount === 0) return '#FF3B30'
return '#FF9500'
}
// 更新任务状态
private updateTaskStatus(task: any) {
const completedCount = this.getCompletedSubtaskCount(task)
task.completed = completedCount === task.subtasks.length
}
}
代码详解
多任务数据结构
@State tasks: Array<{
id: number,
title: string,
description: string,
deadline: string,
priority: 'high' | 'medium' | 'low',
completed: boolean,
subtasks: Array<{
id: number,
title: string,
completed: boolean
}>
}> = [
// 项目规划任务
{
id: 1,
title: '项目规划',
description: '制定项目开发计划和时间表',
deadline: '2024-03-01',
priority: 'high',
completed: false,
subtasks: [ /* 子任务数据 */ ]
},
// 功能开发任务
{
id: 2,
title: '功能开发',
description: '实现核心功能模块',
deadline: '2024-03-15',
priority: 'high',
completed: false,
subtasks: [ /* 子任务数据 */ ]
},
// 测试验证任务
{
id: 3,
title: '测试验证',
description: '进行功能测试和性能测试',
deadline: '2024-03-20',
priority: 'medium',
completed: false,
subtasks: [ /* 子任务数据 */ ]
}
]
多任务数据结构的实现要点:
- 使用数组存储多个任务对象,每个任务包含完整的信息和子任务列表
- 任务类型多样化,包括项目规划、功能开发和测试验证等不同阶段的任务
- 不同任务具有不同的优先级、截止日期和完成状态
- 每个任务都有自己的子任务列表,子任务数量可以不同
这种数据结构设计灵活,可以适应各种复杂的任务管理场景,支持任务的分类和层次化管理。
任务优先级管理
// 优先级颜色映射
private priorityColors = {
high: '#FF3B30', // 红色表示高优先级
medium: '#FF9500', // 橙色表示中优先级
low: '#34C759' // 绿色表示低优先级
}
// 获取优先级文本
private getPriorityText(priority: string): string {
const priorityMap = {
high: '高优先级',
medium: '中优先级',
low: '低优先级'
}
return priorityMap[priority]
}
任务优先级管理的实现要点:
- 使用颜色编码区分不同优先级的任务:
- 高优先级使用红色,表示紧急任务
- 中优先级使用橙色,表示重要但不紧急的任务
- 低优先级使用绿色,表示可以稍后处理的任务
- 通过
getPriorityText
方法将内部使用的英文优先级值转换为用户友好的中文显示文本 - 在任务卡片中使用Badge组件显示优先级标签,颜色根据优先级动态变化
这种优先级管理方式帮助用户快速识别任务的重要性,合理安排工作顺序。
整体任务进度统计
// 标题栏
Row() {
Text('任务管理')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Blank()
Badge({
count: this.getUncompletedTaskCount(),
position: BadgePosition.Right,
style: {
backgroundColor: '#FF3B30',
borderRadius: 10
}
}) {
Text('待完成')
.fontSize(16)
.fontColor('#666')
}
}
// 获取未完成任务数量
private getUncompletedTaskCount(): number {
return this.tasks.filter(task => !task.completed).length
}
整体任务进度统计的实现要点:
- 在标题栏右侧使用Badge组件显示未完成任务的总数量
- 通过
getUncompletedTaskCount
方法计算未完成任务数量:- 使用
filter
方法筛选出未完成的任务(completed
为false
的任务) - 返回筛选结果的长度,即未完成任务的数量
- 使用
- 使用红色背景的徽章使未完成任务数量醒目,提醒用户关注
这种整体统计方式让用户一目了然地看到还有多少任务需要完成,有助于整体规划工作。
子任务进度管理
// 子任务进度
Row() {
Text('子任务进度:')
.fontSize(14)
.fontColor('#666')
Badge({
value: `${this.getCompletedSubtaskCount(task)}/${task.subtasks.length}`,
style: {
backgroundColor: this.getProgressColor(task),
borderRadius: 10,
padding: 4
}
}) {}
}
// 获取已完成子任务数量
private getCompletedSubtaskCount(task: any): number {
return task.subtasks.filter(subtask => subtask.completed).length
}
// 获取进度颜色
private getProgressColor(task: any): string {
const completedCount = this.getCompletedSubtaskCount(task)
const totalCount = task.subtasks.length
if (completedCount === totalCount) return '#34C759'
if (completedCount === 0) return '#FF3B30'
return '#FF9500'
}
子任务进度管理的实现要点:
- 每个任务卡片中显示子任务的完成进度,格式为"已完成数量/总数量"
- 进度徽章的颜色根据完成情况动态变化:
- 全部完成时显示绿色
- 部分完成时显示橙色
- 全部未完成时显示红色
- 这种颜色编码方式使用户能够快速识别任务的进展状态
通过这种设计,用户可以清晰地看到每个任务的完成进度,合理安排工作重点。
任务状态联动机制
// 子任务列表
Column({ space: 10 }) {
ForEach(task.subtasks, (subtask) => {
Row() {
Checkbox()
.select(subtask.completed)
.onChange((value: boolean) => {
subtask.completed = value
this.updateTaskStatus(task)
})
Text(subtask.title)
.fontSize(14)
.fontColor(subtask.completed ? '#999' : '#333')
.decoration({ type: subtask.completed ?
TextDecorationType.LineThrough : TextDecorationType.None })
}
})
}
// 更新任务状态
private updateTaskStatus(task: any) {
const completedCount = this.getCompletedSubtaskCount(task)
task.completed = completedCount === task.subtasks.length
}
任务状态联动机制的实现要点:
- 当用户勾选或取消勾选子任务时,通过
onChange
事件触发状态更新:- 首先更新子任务的
completed
状态 - 然后调用
updateTaskStatus
方法更新父任务的状态
- 首先更新子任务的
updateTaskStatus
方法根据子任务的完成情况更新父任务的状态:- 当所有子任务都完成时,将父任务标记为完成
- 当有任何子任务未完成时,将父任务标记为未完成
- 状态更新后,界面会自动刷新,包括:
- 子任务文本样式变化(已完成任务显示删除线和灰色文本)
- 进度徽章的数值和颜色更新
- 标题栏的未完成任务计数更新
这种联动机制确保了数据的一致性,使用户操作子任务时能够看到整体状态的实时变化。
总结
本篇文章介绍了如何使用HarmonyOS NEXT的Badge组件实现任务进度指示器的多任务管理功能:
- 设计灵活的多任务数据结构,支持不同类型和优先级的任务管理
- 使用Badge组件实现多层次的进度指示:
- 标题栏显示整体未完成任务数量
- 任务卡片显示优先级标签
- 子任务区域显示完成进度
- 实现动态的颜色编码系统,通过颜色变化直观反映任务状态
- 建立完整的任务状态联动机制,确保数据一致性和界面实时更新
推荐内容
点击阅读全文
更多推荐
活动日历
查看更多
活动时间 2024-06-24 00:00:00

鸿蒙OS初体验:从0到1的开发者之路·苏州
活动时间 2024-06-11 00:00:00

鸿蒙OS初体验:从0到1的开发者之路·武汉
活动时间 2024-06-11 00:00:00

鸿蒙OS初体验:从0到1的开发者之路·长沙
活动时间 2024-06-11 00:00:00

鸿蒙OS初体验:从0到1的开发者之路·西安
活动时间 2024-06-11 00:00:00

鸿蒙OS初体验:从0到1的开发者之路·南京
社区排行榜
目录
所有评论(0)