OpenHarmony进度条如何显示最新状态

OpenHarmony进度条显示最新状态

一、核心思路

• 使用**@State**标记进度变量，使其成为可观察状态；当值变化时，UI会自动刷新，进度条即可展示最新状态。
• 选择组件形态：不确定进度用LoadingProgress（旋转动画），确定进度用Progress（线性或圆形）。
• 绑定更新源：将进度与网络下载回调、任务队列、定时器等数据源解耦，通过状态变更驱动UI。
• 线程与生命周期：耗时任务在Worker/异步任务中执行，进度通过消息或回调切回主线程更新；页面不可见时可选择暂停刷新以节能。

二、标准用法代码示例 ArkTS

@Entry
@Component
struct Demo {
  @State progressValue: number = 0            // 0~100
  @State isIndeterminate: boolean = true      // true=不确定进度，false=确定进度
  @State statusText: string = '准备中...'

  build() {
    Column({ space: 12 }) {
      // 1) 不确定进度（转圈）
      if (this.isIndeterminate) {
        LoadingProgress()
          .width(48)
          .height(48)
          .color('#1890FF')
        Text('加载中...')
          .fontSize(14)
          .fontColor('#666')
      }

      // 2) 确定进度（线性）
      if (!this.isIndeterminate) {
        Progress({ value: this.progressValue, total: 100 })
          .width('100%')
          .height(8)
          .color('#1890FF')
          .backgroundColor('#E0E0E0')
          .style({ strokeWidth: 8 })

        Text(`${this.progressValue}% - ${this.statusText}`)
          .fontSize(14)
          .fontColor('#333')
      }

      Button(this.isIndeterminate ? '开始' : '重置')
        .onClick(() => this.startOrReset())
    }
    .padding(16)
    .width('100%')
  }

  private startOrReset() {
    if (this.isIndeterminate) {
      // 模拟进入确定进度
      this.isIndeterminate = false
      this.progressValue = 0
      this.statusText = '下载中...'
      this.tick()
    } else {
      // 重置为不确定进度
      this.isIndeterminate = true
      this.progressValue = 0
      this.statusText = '准备中...'
    }
  }

  private tick() {
    if (this.progressValue >= 100) {
      this.statusText = '完成'
      return
    }
    setTimeout(() => {
      // 模拟进度增长（实际替换为下载/任务回调）
      this.progressValue = Math.min(this.progressValue + 10, 100)
      this.statusText = `下载中 ${this.progressValue}%`
      this.tick()
    }, 500)
  }
}

要点：用**@State驱动UI刷新；不确定进度用LoadingProgress**，确定进度用Progress并设置value/total；通过setTimeout/异步回调持续更新即可实时反映最新状态。

三、常见场景与组件选择

• 不确定进度（网络请求、初始化）：使用LoadingProgress，完成后隐藏或切换为确定进度。
• 确定进度（下载/上传/批处理）：使用Progress，通过value/total显示百分比，可配合文本展示“已完成/总量”。
• 媒体播放/长任务：用Slider作为“可拖拽进度条”，与播放器当前位置/总时长双向绑定，实现“显示最新播放进度 + 用户跳转”。
• 按钮内嵌进度：在Button中叠加Progress或LoadingProgress，点击后禁用按钮并显示进度，完成后再恢复。

四、进阶与排错

• 确保进度变量被**@State**修饰，且直接修改该变量（如：this.progressValue = x），避免直接改内部字段导致UI不刷新。
• 跨线程更新：耗时任务在Worker/异步中执行，进度通过postMessage/回调到主线程后修改状态，UI即可展示最新值。
• 避免抖动：为频繁进度推送做节流/合并（例如每200ms最多刷新一次）。
• 完成态处理：进度到**100%**后，可延迟隐藏或切换到“完成”态UI，提升体验。
• 自定义绘制：系统组件不满足时，可用Canvas/Path实现CircleProgress等自定义样式，按进度重绘弧线或文字。