一、案例介绍

本案例将介绍Progress组件的基础用法和数据绑定方法，通过实现一个文件上传进度展示功能，帮助开发者深入理解Progress组件的核心特性。

二、实现目标

1. 创建基础的线性进度条和环形进度条
2. 实现进度值的动态绑定和更新
3. 添加进度状态的监听和反馈

三、代码实现

1. 基础结构搭建

@Entry
@Component
struct ProgressBasicExample {
  @State uploadProgress: number = 0
  @State downloadProgress: number = 0
  private timer: number = -1

  build() {
    Column({ space: 20 }) {
      Text('文件上传进度')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      // 线性进度条
      Progress({ value: this.uploadProgress, total: 100 })
        .width('90%')
        .height(15)
        .color('#007DFF')

      Text('文件下载进度')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      // 环形进度条
      Progress({ value: this.downloadProgress, total: 100, style: ProgressStyle.Ring })
        .width(120)
        .color('#36D1DC')
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#F5F5F5')
  }
}

2. 添加数据绑定和更新逻辑

@Entry
@Component
struct ProgressBasicExample {
  @State uploadProgress: number = 0
  @State downloadProgress: number = 0
  private uploadTimer: number = -1
  private downloadTimer: number = -1

  // 模拟上传进度更新
  startUpload() {
    this.uploadTimer = setInterval(() => {
      if (this.uploadProgress < 100) {
        this.uploadProgress += 2
      } else {
        clearInterval(this.uploadTimer)
      }
    }, 100)
  }

  // 模拟下载进度更新
  startDownload() {
    this.downloadTimer = setInterval(() => {
      if (this.downloadProgress < 100) {
        this.downloadProgress += 1
      } else {
        clearInterval(this.downloadTimer)
      }
    }, 50)
  }

  // 重置进度
  resetProgress() {
    this.uploadProgress = 0
    this.downloadProgress = 0
    clearInterval(this.uploadTimer)
    clearInterval(this.downloadTimer)
  }

  build() {
    Column({ space: 20 }) {
      Text('文件上传进度')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      Progress({ value: this.uploadProgress, total: 100 })
        .width('90%')
        .height(15)
        .color('#007DFF')
        .onChange((value: number) => {
          if (value === 100) {
            AlertDialog.show({
              message: '文件上传完成！',
              confirm: {
                value: '确定',
                action: () => {
                  console.info('Upload completed')
                }
              }
            })
          }
        })

      Text('文件下载进度')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)

      Progress({ value: this.downloadProgress, total: 100, style: ProgressStyle.Ring })
        .width(120)
        .color('#36D1DC')
        .onChange((value: number) => {
          if (value === 100) {
            AlertDialog.show({
              message: '文件下载完成！',
              confirm: {
                value: '确定',
                action: () => {
                  console.info('Download completed')
                }
              }
            })
          }
        })

      Row({ space: 20 }) {
        Button('开始上传')
          .onClick(() => this.startUpload())

        Button('开始下载')
          .onClick(() => this.startDownload())

        Button('重置')
          .onClick(() => this.resetProgress())
      }
      .margin({ top: 30 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#F5F5F5')
  }

  aboutToDisappear() {
    clearInterval(this.uploadTimer)
    clearInterval(this.downloadTimer)
  }
}

四、功能说明

1. 进度条类型

• 线性进度条：用于展示文件上传进度
• 环形进度条：用于展示文件下载进度

2. 数据绑定

• 使用@State装饰器管理进度状态
• 通过定时器模拟进度更新
• 实现进度重置功能

3. 状态监听

• 使用onChange事件监听进度变化
• 在进度完成时显示提示对话框

五、开发要点

1. 状态管理

• 使用@State进行状态管理，确保UI与数据同步更新
• 合理控制定时器的创建和销毁

2. 交互设计

• 提供清晰的操作按钮
• 添加适当的状态反馈
• 注意进度展示的流畅性

3. 资源管理

• 在组件销毁时清理定时器资源
• 避免内存泄漏

六、注意事项

1. 进度值范围控制

   • 确保进度值在0-100之间
   • 注意进度更新的步进值设置

2. 定时器管理

   • 合理设置更新间隔
   • 及时清理定时器资源

3. 状态同步

   • 确保状态更新的及时性
   • 避免出现进度跳变现象