一、案例介绍

本案例将展示如何使用SpanStepper组件实现一个任务进度追踪系统，包括任务创建、进行中和完成状态的管理，以及详细的任务信息展示。

二、代码实现

@Entry
@Component
struct TaskTrackerExample {
  @State currentStep: number = 0
  @State taskInfo: {
    title: string,
    description: string,
    startTime: string,
    endTime: string,
    progress: number,
    notes: string
  } = {
    title: '',
    description: '',
    startTime: '',
    endTime: '',
    progress: 0,
    notes: ''
  }

  build() {
    Column() {
      // 步骤指示器
      SpanStepper() {
        StepperItem() {
          Column() {
            Text('任务创建').fontSize(16).fontWeight(FontWeight.Bold)
            Text('设置任务信息').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 0 ? ItemState.CURRENT :
               this.currentStep > 0 ? ItemState.COMPLETED : ItemState.WAITING)

        StepperItem() {
          Column() {
            Text('进行中').fontSize(16).fontWeight(FontWeight.Bold)
            Text('更新任务进度').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 1 ? ItemState.CURRENT :
               this.currentStep > 1 ? ItemState.COMPLETED : ItemState.WAITING)

        StepperItem() {
          Column() {
            Text('已完成').fontSize(16).fontWeight(FontWeight.Bold)
            Text('完成任务总结').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 2 ? ItemState.CURRENT : ItemState.WAITING)
      }
      .width('100%')
      .padding(16)

      // 表单内容
      Column() {
        if (this.currentStep === 0) {
          // 任务创建表单
          TextInput({ placeholder: '请输入任务标题' })
            .width('100%')
            .height(48)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.taskInfo.title = value
            })

          TextArea({ placeholder: '请输入任务描述' })
            .width('100%')
            .height(100)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.taskInfo.description = value
            })

          // 开始时间选择
          DatePicker({
            start: new Date().toISOString(),
            end: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
            selected: new Date().toISOString()
          })
            .onChange((value: string) => {
              this.taskInfo.startTime = value
            })
            .margin({ top: 16 })

        } else if (this.currentStep === 1) {
          // 任务进度更新
          Column() {
            Text('任务进度').fontSize(16).fontWeight(FontWeight.Bold)
            Slider({
              value: this.taskInfo.progress,
              min: 0,
              max: 100,
              step: 1
            })
              .width('100%')
              .onChange((value: number) => {
                this.taskInfo.progress = value
              })
            Text(`${this.taskInfo.progress}%`)
              .fontSize(14)
              .margin({ top: 8 })
          }.width('100%').padding(16)

          // 任务备注
          TextArea({ placeholder: '添加任务备注' })
            .width('100%')
            .height(100)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.taskInfo.notes = value
            })

        } else {
          // 任务完成总结
          Column() {
            Text('任务总结').fontSize(20).fontWeight(FontWeight.Bold)
            
            Text(`任务标题：${this.taskInfo.title}`)
              .fontSize(16)
              .margin({ top: 16 })
            
            Text(`任务描述：${this.taskInfo.description}`)
              .fontSize(14)
              .margin({ top: 8 })
            
            Text(`开始时间：${this.taskInfo.startTime}`)
              .fontSize(14)
              .margin({ top: 8 })
            
            Text(`完成时间：${new Date().toISOString()}`)
              .fontSize(14)
              .margin({ top: 8 })
            
            Text(`任务进度：${this.taskInfo.progress}%`)
              .fontSize(14)
              .margin({ top: 8 })
            
            Text(`任务备注：${this.taskInfo.notes}`)
              .fontSize(14)
              .margin({ top: 8 })
          }
          .width('100%')
          .padding(16)
        }
      }.width('100%').padding({ left: 16, right: 16 })

      // 操作按钮
      Row() {
        Button('上一步')
          .enabled(this.currentStep > 0)
          .opacity(this.currentStep > 0 ? 1 : 0.5)
          .onClick(() => {
            if (this.currentStep > 0) {
              this.currentStep--
            }
          })

        Button(this.currentStep === 2 ? '完成任务' : '下一步')
          .enabled(this.currentStep < 3)
          .onClick(() => {
            if (this.currentStep < 2) {
              this.currentStep++
            } else {
              // 在实际应用中，这里可以处理任务完成的相关逻辑
              console.info('任务已完成')
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .padding(16)
      .margin({ top: 20 })
    }
  }
}

三、代码解析

1. 状态定义

@State currentStep: number = 0  // 当前步骤索引
@State taskInfo: {  // 任务信息对象
  title: string,
  description: string,
  startTime: string,
  endTime: string,
  progress: number,
  notes: string
}

• 使用@State装饰器定义组件的状态变量
• taskInfo对象存储任务的详细信息
• 包含任务标题、描述、时间、进度等属性

2. 任务创建表单

TextInput({ placeholder: '请输入任务标题' })
  .width('100%')
  .height(48)
  .onChange((value: string) => {
    this.taskInfo.title = value
  })

DatePicker({
  start: new Date().toISOString(),
  end: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
  selected: new Date().toISOString()
})

• 使用TextInput和TextArea组件收集任务信息
• 使用DatePicker组件选择任务开始时间
• 限制日期选择范围在当前日期后30天内

3. 进度更新

Slider({
  value: this.taskInfo.progress,
  min: 0,
  max: 100,
  step: 1
})
  .onChange((value: number) => {
    this.taskInfo.progress = value
  })

• 使用Slider组件实现进度条功能
• 进度范围从0到100
• 通过onChange事件更新进度值

4. 任务总结展示

Column() {
  Text('任务总结')
  Text(`任务标题：${this.taskInfo.title}`)
  Text(`任务描述：${this.taskInfo.description}`)
  Text(`开始时间：${this.taskInfo.startTime}`)
  Text(`完成时间：${new Date().toISOString()}`)
  Text(`任务进度：${this.taskInfo.progress}%`)
  Text(`任务备注：${this.taskInfo.notes}`)
}

• 在最后一步显示任务的所有信息
• 包括任务的基本信息、时间记录和进度
• 自动记录任务完成时间

四、总结

通过本案例，我们学习了：

1. SpanStepper组件在任务追踪系统中的应用
2. 如何实现任务信息的收集和展示
3. 使用Slider组件实现进度条功能
4. 任务状态的管理和更新

这些知识点将帮助你在实际项目中实现更完善的任务管理功能。