OpenHarmony进度条怎么用

在 OpenHarmony（ArkUI，eTS/ArkTS） 中，进度条主要使用 Progress 组件。下面按常见用法给你说明。

一、基础进度条（Progress）

1️⃣ 线性进度条（默认）

@Entry
@Component
struct ProgressExample {
  build() {
    Column() {
      Progress({ value: 40, total: 100, type: ProgressType.Linear })
        .width('80%')
        .height(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

• value：当前进度
• total：总进度（默认 100）
• type：进度条样式

二、进度条类型（ProgressType）

ProgressType.Linear    // 线性（默认）
ProgressType.Ring      // 环形（不显示进度文字）
ProgressType.ScaleRing // 环形带刻度
ProgressType.Eclipse   // 圆形（类似加载圈）

环形进度条

Progress({ value: 60, total: 100, type: ProgressType.Ring })
  .width(100)
  .height(100)

圆形加载（不确定进度）

Progress({ value: 0, total: 100, type: ProgressType.Eclipse })

三、动态进度（常见场景）

@Entry
@Component
struct DynamicProgress {
  @State progressValue: number = 0

  build() {
    Column() {
      Progress({ value: this.progressValue, total: 100 })
        .width('80%')

      Button('开始')
        .onClick(() => {
          setInterval(() => {
            if (this.progressValue < 100) {
              this.progressValue += 10
            }
          }, 500)
        })
    }
  }
}

四、常用样式设置

Progress({ value: 50, total: 100 })
  .width('80%')
  .height(20)
  .color(Color.Blue)        // 进度颜色
  .backgroundColor(Color.Gray) // 背景颜色

五、注意事项

✅ OpenHarmony API 9+ 推荐使用 ArkTS
✅ Progress 不支持直接显示文字（需自行加 Text）
✅ 不确定进度用 Eclipse 类型

如果你用的是 JS UI（旧版本） 或 具体 SDK 版本，可以告诉我，我可以给你对应示例。