一、场景介绍

在应用中展示任务完成进度是一个常见需求，比如学习课程进度、项目里程碑等。本文将介绍如何使用StepperItem组件构建一个任务完成进度展示界面，帮助用户直观地了解任务进展。

二、功能实现

1. 页面结构设计

@Entry
@Component
struct TaskProgressExample {
  @State currentTask: number = 2  // 当前进行的任务
  @State tasks: Array<{
    title: string,
    description: string,
    startTime: string,
    endTime: string,
    status: 'completed' | 'inProgress' | 'waiting'
  }> = [
    {
      title: '需求分析',
      description: '收集和分析项目需求',
      startTime: '2024-01-01',
      endTime: '2024-01-03',
      status: 'completed'
    },
    {
      title: '设计规划',
      description: '制定详细的设计方案',
      startTime: '2024-01-04',
      endTime: '2024-01-07',
      status: 'completed'
    },
    {
      title: '开发实现',
      description: '进行功能开发和单元测试',
      startTime: '2024-01-08',
      endTime: '2024-01-20',
      status: 'inProgress'
    },
    {
      title: '测试验证',
      description: '进行系统测试和问题修复',
      startTime: '2024-01-21',
      endTime: '2024-01-25',
      status: 'waiting'
    },
    {
      title: '部署上线',
      description: '系统部署和上线准备',
      startTime: '2024-01-26',
      endTime: '2024-01-28',
      status: 'waiting'
    }
  ]

  build() {
    Column() {
      // 标题
      Text('项目进度跟踪')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 40 })

      // 进度概览
      this.renderProgressOverview()

      // 任务步骤
      Stepper() {
        ForEach(this.tasks, (task, index) => {
          StepperItem() {
            this.renderTaskItem(task, index)
          }
          .status(task.status === 'completed' ? ItemState.COMPLETED :
                 task.status === 'inProgress' ? ItemState.CURRENT : ItemState.WAITING)
        })
      }
      .margin({ top: 20 })

      // 任务详情
      this.renderTaskDetails()
    }
    .padding(20)
  }

  @Builder
  renderProgressOverview() {
    Row() {
      Column() {
        Text('已完成任务')
          .fontSize(14)
          .opacity(0.6)
        Text(this.tasks.filter(task => task.status === 'completed').length.toString())
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 8 })
      }.layoutWeight(1)

      Column() {
        Text('进行中任务')
          .fontSize(14)
          .opacity(0.6)
        Text(this.tasks.filter(task => task.status === 'inProgress').length.toString())
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 8 })
      }.layoutWeight(1)

      Column() {
        Text('待开始任务')
          .fontSize(14)
          .opacity(0.6)
        Text(this.tasks.filter(task => task.status === 'waiting').length.toString())
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 8 })
      }.layoutWeight(1)
    }
    .width('100%')
    .backgroundColor('#F5F5F5')
    .padding(20)
    .borderRadius(8)
  }

  @Builder
  renderTaskItem(task, index) {
    Column() {
      Text(task.title)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
      Row() {
        Text(task.startTime)
          .fontSize(12)
          .opacity(0.6)
        Text(' - ')
          .fontSize(12)
          .opacity(0.6)
        Text(task.endTime)
          .fontSize(12)
          .opacity(0.6)
      }.margin({ top: 4 })
    }
    .onClick(() => this.showTaskDetails(index))
  }

  @Builder
  renderTaskDetails() {
    if (this.currentTask >= 0 && this.currentTask < this.tasks.length) {
      Column() {
        Text('任务详情')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 40, bottom: 20 })

        Column() {
          // 任务标题
          Text(this.tasks[this.currentTask].title)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)

          // 任务描述
          Text(this.tasks[this.currentTask].description)
            .fontSize(14)
            .opacity(0.6)
            .margin({ top: 8 })

          // 时间信息
          Row() {
            Text('开始时间：')
              .fontSize(14)
            Text(this.tasks[this.currentTask].startTime)
              .fontSize(14)
          }.margin({ top: 16 })

          Row() {
            Text('结束时间：')
              .fontSize(14)
            Text(this.tasks[this.currentTask].endTime)
              .fontSize(14)
          }.margin({ top: 8 })

          // 状态信息
          Row() {
            Text('当前状态：')
              .fontSize(14)
            Text(this.getStatusText(this.tasks[this.currentTask].status))
              .fontSize(14)
              .fontColor(this.getStatusColor(this.tasks[this.currentTask].status))
          }.margin({ top: 8 })

          // 任务操作按钮
          if (this.tasks[this.currentTask].status === 'inProgress') {
            Button('完成任务')
              .onClick(() => this.completeTask())
              .margin({ top: 20 })
          }
        }
        .width('100%')
        .padding(20)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
      }
    }
  }

  showTaskDetails(index: number) {
    this.currentTask = index
  }

  getStatusText(status: string): string {
    switch (status) {
      case 'completed':
        return '已完成'
      case 'inProgress':
        return '进行中'
      case 'waiting':
        return '待开始'
      default:
        return '未知状态'
    }
  }

  getStatusColor(status: string): Color {
    switch (status) {
      case 'completed':
        return Color.Green
      case 'inProgress':
        return Color.Blue
      case 'waiting':
        return Color.Gray
      default:
        return Color.Black
    }
  }

  completeTask() {
    AlertDialog.show({
      title: '完成任务',
      message: '确认将当前任务标记为已完成？',
      confirm: {
        value: '确认',
        action: () => {
          // 更新任务状态
          this.tasks[this.currentTask].status = 'completed'
          // 将下一个等待中的任务设置为进行中
          const nextTask = this.tasks.findIndex(task => task.status === 'waiting')
          if (nextTask !== -1) {
            this.tasks[nextTask].status = 'inProgress'
          }
        }
      },
      cancel: {
        value: '取消'
      }
    })
  }
}

三、实现要点

1. 数据结构设计

• 使用数组存储任务信息
• 为每个任务定义完整的属性
• 实现任务状态的管理

2. 界面布局

• 展示任务进度概览
• 使用StepperItem显示任务步骤
• 提供详细的任务信息展示

3. 交互实现

• 支持任务详情的查看
• 实现任务状态的更新
• 提供任务完成的操作

四、总结

本文通过HarmonyOS的StepperItem组件实现了一个任务完成进度展示界面，直观地展示了任务的各个阶段及其完成情况。通过合理设计数据结构、精心布局界面以及实现流畅的交互功能，用户可以清晰地了解任务进度、查看任务详情并进行任务状态更新，有效提升了任务管理的可视化效果和用户体验。