img

目录

  • 案例介绍
  • 代码实现
  • 代码详解
  • 多任务数据结构
  • 任务优先级管理
  • 整体任务进度统计
  • 子任务进度管理
  • 任务状态联动机制
  • 总结

案例介绍

本篇文章是任务进度指示器系列的第三篇,将重点介绍如何使用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: [ /* 子任务数据 */ ]
  }
]

多任务数据结构的实现要点:

  1. 使用数组存储多个任务对象,每个任务包含完整的信息和子任务列表
  2. 任务类型多样化,包括项目规划、功能开发和测试验证等不同阶段的任务
  3. 不同任务具有不同的优先级、截止日期和完成状态
  4. 每个任务都有自己的子任务列表,子任务数量可以不同

这种数据结构设计灵活,可以适应各种复杂的任务管理场景,支持任务的分类和层次化管理。

任务优先级管理

// 优先级颜色映射
private priorityColors = {
  high: '#FF3B30',  // 红色表示高优先级
  medium: '#FF9500', // 橙色表示中优先级
  low: '#34C759'    // 绿色表示低优先级
}

// 获取优先级文本
private getPriorityText(priority: string): string {
  const priorityMap = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return priorityMap[priority]
}

任务优先级管理的实现要点:

  1. 使用颜色编码区分不同优先级的任务:
    • 高优先级使用红色,表示紧急任务
    • 中优先级使用橙色,表示重要但不紧急的任务
    • 低优先级使用绿色,表示可以稍后处理的任务
  2. 通过getPriorityText方法将内部使用的英文优先级值转换为用户友好的中文显示文本
  3. 在任务卡片中使用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
}

整体任务进度统计的实现要点:

  1. 在标题栏右侧使用Badge组件显示未完成任务的总数量
  2. 通过getUncompletedTaskCount方法计算未完成任务数量:
    • 使用filter方法筛选出未完成的任务(completedfalse的任务)
    • 返回筛选结果的长度,即未完成任务的数量
  3. 使用红色背景的徽章使未完成任务数量醒目,提醒用户关注

这种整体统计方式让用户一目了然地看到还有多少任务需要完成,有助于整体规划工作。

子任务进度管理

// 子任务进度
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'
}

子任务进度管理的实现要点:

  1. 每个任务卡片中显示子任务的完成进度,格式为"已完成数量/总数量"
  2. 进度徽章的颜色根据完成情况动态变化:
    • 全部完成时显示绿色
    • 部分完成时显示橙色
    • 全部未完成时显示红色
  3. 这种颜色编码方式使用户能够快速识别任务的进展状态

通过这种设计,用户可以清晰地看到每个任务的完成进度,合理安排工作重点。

任务状态联动机制

// 子任务列表
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
}

任务状态联动机制的实现要点:

  1. 当用户勾选或取消勾选子任务时,通过onChange事件触发状态更新:
    • 首先更新子任务的completed状态
    • 然后调用updateTaskStatus方法更新父任务的状态
  2. updateTaskStatus方法根据子任务的完成情况更新父任务的状态:
    • 当所有子任务都完成时,将父任务标记为完成
    • 当有任何子任务未完成时,将父任务标记为未完成
  3. 状态更新后,界面会自动刷新,包括:
    • 子任务文本样式变化(已完成任务显示删除线和灰色文本)
    • 进度徽章的数值和颜色更新
    • 标题栏的未完成任务计数更新

这种联动机制确保了数据的一致性,使用户操作子任务时能够看到整体状态的实时变化。

总结

本篇文章介绍了如何使用HarmonyOS NEXT的Badge组件实现任务进度指示器的多任务管理功能:

  1. 设计灵活的多任务数据结构,支持不同类型和优先级的任务管理
  2. 使用Badge组件实现多层次的进度指示:
    • 标题栏显示整体未完成任务数量
    • 任务卡片显示优先级标签
    • 子任务区域显示完成进度
  3. 实现动态的颜色编码系统,通过颜色变化直观反映任务状态
  4. 建立完整的任务状态联动机制,确保数据一致性和界面实时更新
推荐内容
点击阅读全文
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐