harmony OS NEXT-Progress组件概述

鸿蒙Harmony-Progress组件概述

1.1Progress组件概述

• 作用：显示操作或任务的进度，支持线性，环形，刻度等多种样式
• 适用场景：文件上传/下载、任务完成度、系统状态反馈等

2.1基础属性（参考官方文档）

2.1.1 参数详解

参数列表

参数名	类型	必填	默认值	说明	卡片能力
value	number	是	0	当前进度值。若设置 <0 则自动置为 0；若 >total 则置为 total。	支持（API 9+）
total	number	否	100	总进度长度。若设置 ≤0 则自动置为 100。	支持（API 9+）
type8+	ProgressType	否	ProgressType.Linear	进度条类型： Linear（线性）/Ring（环形）/Eclipse（圆形）/Scale（刻度）	支持（API 9+）
style (deprecated)	ProgressStyle	否	ProgressStyle.Linear	进度条样式（已废弃，建议使用 type 替代）	支持（API 9+，但不再推荐使用）

---

2.1.2关键说明

value

• 动态绑定：可通过变量动态更新进度值。
• 范围控制：自动限制在 [0, total] 区间内。

• 示例：

  @State progressValue: number = 30;
  Progress({ value: this.progressValue })

3.1使用示例

下面我通过组件封装的案例给大家演示

1. 封装loading组件

@Component
struct Loading {
  @State present: number = 10
  private timeId: number | null = null

  aboutToAppear(): void {
    //清除已有的定时器，防止重复调用
    if (this.timeId) {
      clearInterval(this.timeId)
    }
    //创建新的定时器
    this.timeId = setInterval(() => {
      if (this.present >= 100) {
        this.present = 0
      } else {
        this.present++
      }
    }, 30)
  }

  aboutToDisappear(): void {
    if (this.timeId) {
      clearTimeout(this.timeId)
      this.timeId = null
    }
  }

  build() {
    Column() {
      Progress({
        value: this.present,
        type: ProgressType.Ring,
        total: 100
      })

    }

  }
}

export default Loading

2. 展示页面

import Loading from './Loading';

@Entry
@Component
struct Test3 {
  @State
  isShow: boolean = true
  //存储定时器Id  用于清除定时器
  private timerId: number | null = null

  aboutToAppear(): void { //生命周期钩子，当组件即将显示时触发
    this.timerId = setTimeout(() => { //设置一个一次性定时器  只会执行一次
      this.isShow = false //3s将isShow标志设置为false

    }, 3 * 1000) //延迟时间：3s (3000ms)
  }

  //避免组件在3s内被销毁，造成内存泄漏或报错  (比如用户快速切换页面)
  //修复：在组建销毁时清除定时器  添加生命周期销毁钩子
  aboutToDisappear(): void {
    if (this.timerId) {
      clearTimeout(this.timerId) //清除定时器
      this.timerId = null
    }
  }

  build() {
    Column() {
      if (this.isShow) {
        Loading()
      }


    }.width('100%')
    .height('100%')
  }
}

3. 效果展示