HarmonyOS Progress UI控件的进度控制

目标：Progress进度条，需要展示为ring形状，进度自动增加，从0到100，整个过程的耗时可以指定(2s或者3s等)。进度自动增加过程中，如果发生了异常事件，进度需要变到0.

现状：

通过 @AnimatableExtend装饰器，实现了进度条的自动增加。

bug：

1.从0到100之后，只能再从100回到0.无法每次都从0到100

2.无法中断从0到100的进度。

相关代码：

// 环形进度条进度  
@State progressValue: number = 0;  
// 环形进度条颜色  
@State progressColor: Color = Color.Grey;  
  
Progress({  
  value: 0,                   // 设置当前进度  
  total: 100,                  // 设置进度总量  
  type: ProgressType.Ring      // 设置进度条的样式为环形样式  
}).style({ strokeWidth: 6})  
  .size({width: '100%', height: '100%'})  
  .color(this.progressColor)  
  .animatableProgressValue(this.progressValue)  
  .animation({ duration: 10000, curve: "Linear"})  
  .rotate({x: 0, y: 0, z: 1, angle: 180})  
  
@AnimatableExtend(Progress) function animatableProgressValue(progressVal: number) {  
  .value(progressVal) // 调用系统属性接口  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

如何实现进度自动从0到100，并且可以中断进度，重新从0开始。

HarmonyOS

Heiang

2024-09-27 11:03:45

浏览

回答 1

按赞同

按时间

put_get

可以通过动态修改enableSmoothEffect和duration属性，来达到取消动画的效果，参考代码：

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  
  @State progressValue: number = 100;  
  // 环形进度条颜色  
  @State progressColor: Color = Color.Grey;  
  
  @State isSmooth: boolean = true;  
  
  @State durationTime: number = 2000;  
  
  build() {  
    Column() {  
      Progress({  
        value: 0, // 设置当前进度  
        total: 100, // 设置进度总量  
        type: ProgressType.Ring      // 设置进度条的样式为环形样式  
      })  
        .style({ strokeWidth: 6, enableSmoothEffect: this.isSmooth })  
        .size({ width: 200, height: 200 })  
        .color(this.progressColor)  
        .animatableProgressValue(this.progressValue)  
        .animation({ duration: this.durationTime, curve: "Linear" })  
        .rotate({ x: 0, y: 0, z: 1, angle: 180 })  
  
      // 测试动画效果  
      Button("动画开启")  
        .width(300)  
        .height(50)  
        .onClick(() => {  
          this.progressColor = Color.Blue  
          this.progressValue = this.progressValue == 100 ? 0 : 100;  
          this.durationTime = this.durationTime == 2000 ? 0 : 2000;  
          this.isSmooth = !this.isSmooth;  
        })  
    }  
  }  
}  
  
@AnimatableExtend(Progress) function animatableProgressValue(progressVal: number) {  
  .value(progressVal) // 调用系统属性接口  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

2024-09-27 17:48:27

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Progress UI控件的进度控制

订阅鸿蒙技术特刊，精选内容抢先看