HarmonyOS鸿蒙Next中使用Progress组件展示任务进度

使用场景

如文件传输应用中显示文件下载、上传的进度和速度。如数据加载应用从网络或本地数据库加载大量数据时，展示加载进度。如安装与更新服务中，针对应用安装、系统更新或资源包解压的过程展示等。

实现思路

实现的核心是：定义进度状态 -> 布局Progress组件 -> 绑定状态与样式 -> 通过事件更新状态。

第一步：定义进度状态，在组件中，使用 @State 装饰器定义一个数值类型的变量来存储当前的进度值。

第二步：布局Progress组件，在页面的 build() 方法中，添加 Progress 组件。

第三步：绑定状态与样式，Progress 组件提供了 type 属性来设置样式，常用的有 ProgressType.Linear（线性进度条）和 ProgressType.Ring（环形进度条）。

第四步：通过事件更新状态，在“开始下载”按钮的 onClick 事件中，使用 setInterval 定时器来模拟进度增长。在定时器的回调函数中，递增 @State 变量的值。

实现效果

完整实现代码

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct ProgressDemoPage {
  // 1. 定义进度状态
  [@State](/user/State) downloadProgress: number = 0;
  private timer: number = -1; // 用于存储定时器的ID

  // 开始模拟下载
  startDownload() {
    if (this.timer > 0) {
      return; // 避免重复启动
    }
    this.timer = setInterval(() => {
      if (this.downloadProgress < 100) {
        this.downloadProgress += 2; // 每次增加2%
      } else {
        this.resetDownload(); // 下载完成后自动重置
        promptAction.showToast({ message: '下载完成！' });
      }
    }, 100); // 每100ms更新一次
  }

  // 重置下载进度
  resetDownload() {
    if (this.timer > 0) {
      clearInterval(this.timer);
      this.timer = -1;
    }
    this.downloadProgress = 0;
  }

  // 4. 在组件销毁时清除定时器，防止内存泄漏
  aboutToDisappear() {
    this.resetDownload();
  }

  build() {
    Column() {
      Text('Progress 组件演示')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 40 })

      // 2. & 3. 线性进度条
      Column() {
        Text('线性进度条')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .alignSelf(ItemAlign.Start)
          .margin({ bottom: 15 })

        Progress({ value: this.downloadProgress, total: 100, type: ProgressType.Linear })
          .width('100%')
          .height(20)
          .color('#007DFF') // 进度颜色
          .backgroundColor('#F1F3F5') // 背景颜色
          .style({ strokeWidth: 20 }) // 线条宽度，对于Linear类型即高度

        Text(`${this.downloadProgress}%`)
          .fontSize(14)
          .margin({ top: 8 })
      }
      .width('90%')
      .padding(20)
      .backgroundColor(Color.White)
      .borderRadius(12)
      .margin({ bottom: 30 })

      // 2. & 3. 环形进度条
      Column() {
        Text('环形进度条')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .alignSelf(ItemAlign.Start)
          .margin({ bottom: 15 })

        // 使用Stack将百分比文字叠加在环形进度条中心
        Stack() {
          Progress({ value: this.downloadProgress, total: 100, type: ProgressType.Ring })
            .width(100)
            .height(100)
            .color('#4CAF50')
            .style({ strokeWidth: 8, scaleCount: 12, scaleWidth: 5 }) // 刻度样式

          Text(`${this.downloadProgress}%`)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
        }
        .alignContent(Alignment.Center)
      }
      .width('90%')
      .padding(20)
      .backgroundColor(Color.White)
      .borderRadius(12)
      .margin({ bottom: 40 })

      // 控制按钮
      Row() {
        Button('开始下载')
          .width('40%')
          .height(45)
          .backgroundColor('#007DFF')
          .onClick(() => {
            this.startDownload();
          })

        Button('重置')
          .width('40%')
          .height(45)
          .backgroundColor('#FA2A2D')
          .margin({ left: '10%' })
          .onClick(() => {
            this.resetDownload();
            promptAction.showToast({ message: '已重置' });
          })
      }
      .width('90%')
      .justifyContent(FlexAlign.Center)

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor('#F5F5F5')
    .padding({ top: 20, left: 16, right: 16 })
  }
}