目录

案例介绍

本篇文章是任务进度指示器系列的第二篇，将重点介绍如何使用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 }
      ]
    }
  ]

  // 优先级颜色映射
  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
  }
}

代码详解

子任务进度显示

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

子任务进度显示的实现要点：

1. 使用Row组件水平排列文本标签和进度徽章
2. Badge组件用于显示子任务完成情况：
   • value属性设置为"已完成数量/总数量"的格式，直观展示进度
   • 背景色通过getProgressColor()方法动态计算，根据完成情况变化颜色
   • 使用圆角和内边距美化徽章外观
3. 整个进度显示区域与上方内容保持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 })

子任务列表的实现要点：

1. 使用Column组件垂直排列子任务项，设置space: 10使各项之间有均匀间距
2. 通过ForEach遍历子任务数组，为每个子任务创建一行
3. 每个子任务行包含：
   • Checkbox组件用于勾选/取消子任务，绑定到子任务的completed属性
   • 当复选框状态变化时，通过onChange事件更新子任务状态并调用updateTaskStatus更新父任务状态
   • Text组件显示子任务标题，根据完成状态改变文本颜色和装饰样式
4. 已完成的子任务使用灰色文本和删除线样式，视觉上区分完成状态

这种交互设计允许用户直接勾选子任务，系统会自动更新任务的整体状态。

进度颜色计算

// 获取进度颜色
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. 根据子任务完成情况动态计算徽章的背景颜色：
   • 当所有子任务都完成时，返回绿色#34C759，表示任务已完成
   • 当没有子任务完成时，返回红色#FF3B30，表示任务未开始
   • 当部分子任务完成时，返回橙色#FF9500，表示任务进行中
2. 这种颜色编码方式直观地反映了任务的进度状态，用户无需阅读具体数字也能大致了解完成情况

任务状态更新

// 获取已完成子任务数量
private getCompletedSubtaskCount(task: any): number {
  return task.subtasks.filter(subtask => subtask.completed).length
}

// 更新任务状态
private updateTaskStatus(task: any) {
  const completedCount = this.getCompletedSubtaskCount(task)
  task.completed = completedCount === task.subtasks.length
}

任务状态更新的实现要点：

1. getCompletedSubtaskCount方法：
   • 使用filter方法筛选出已完成的子任务（completed为true的子任务）
   • 返回筛选结果的长度，即已完成子任务的数量
2. updateTaskStatus方法：
   • 计算已完成的子任务数量
   • 当所有子任务都完成时，将任务的completed属性设为true，否则设为false
   • 这确保了父任务的状态始终反映子任务的整体完成情况

这种设计实现了子任务与父任务状态的联动，当用户完成所有子任务时，父任务会自动标记为完成。

总结

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

1. 使用Badge组件显示子任务完成进度，通过分数形式（已完成/总数）直观展示
2. 根据完成情况动态改变徽章颜色，提供视觉反馈
3. 实现可交互的子任务列表，支持勾选完成状态
4. 建立子任务与父任务的状态联动机制，自动更新任务完成状态