HarmonyOS NEXT实战：进度条

Question

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：实现进度的可视化。

知识点：
Progress：进度条组件，用于显示内容加载或操作处理等进度。

设置进度条样式
Progress有5种可选类型，通过ProgressType可以设置进度条样式，ProgressType类型包括：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。

接口

Progress(options: ProgressOptions)

创建进度条组件。

ProgressOptions对象
value：指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。默认值：0
total：指定进度总长。设置小于等于0的数值时置为100。默认值：100
type：指定进度条类型。默认值：ProgressType.Linear

Progress属性

value(value: number) //设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。默认值：0
color(value: ResourceColor | LinearGradient) //设置进度条前景色。
style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)//设置组件的样式。
contentModifier(modifier:ContentModifier)//在progress组件上，定制内容区的方法。modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。
privacySensitive(isPrivacySensitiveMode: Optional)//设置隐私敏感，隐私模式下进度清零，文字将被遮罩。说明：设置null则不敏感。需要卡片框架支持。

ProgressConfiguration属性

value：当前进度值。当设置的数值小于0时，将其置为0。当设置的数值大于total时，将其置为total。默认值：0，取值范围：[0, total]
total：进度总长。取值范围：[0, +∞]

CommonProgressStyleOptions属性
enableSmoothEffect：进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

ProgressStyleOptions属性

strokeWidth：设置进度条宽度（不支持百分比设置）。默认值：4.0vp
scaleCount：设置环形进度条总刻度数。默认值：120，取值范围：[2, min(width, height)/scaleWidth/2/π]，不在取值范围内则样式会显示为环形无刻度进度条。
scaleWidth：设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp

实战：ProgressBarDemoPage

@Entry
@Component
struct ProgressBarDemoPage {
  @State isStart: boolean = false
  @State value: number = 0
  timer: number = 0

  build() {
    Column({ space: 20 }) {
      Text('进度条Demo')

      Text(`当前进度：${this.value}%`)

      Progress({ value: this.value, total: 100, type: ProgressType.Linear })
        .style({ strokeWidth: 10, enableSmoothEffect: true })

      Row({ space: 20 }) {
        Column({ space: 10 }) {
          SymbolGlyph(this.isStart ? $r('sys.symbol.pause') : $r('sys.symbol.play_fill'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text(this.isStart ? '暂停' : '开始')
        }
        .onClick(() => {
          this.isStart = !this.isStart
          this.updateProgress()
        })

        Column({ space: 10 }) {
          SymbolGlyph($r('sys.symbol.arrow_counterclockwise'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text('重置')
        }
        .onClick(() => {
          clearInterval(this.timer); // 关闭定时器
          this.value = 0
        })
      }
    }
    .height('100%')
    .width('100%')
    .padding({ top: 10, right: 20, left: 20 })
  }

  updateProgress() {
    if (this.isStart) {
      this.timer = setInterval(() => {
        this.value = this.value + 1;
        if (this.value === 100) {
          clearInterval(this.timer); // 关闭定时器
        }
      }, 100)
    } else {
      clearInterval(this.timer); // 关闭定时器
    }
  }
}