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) // 调用系统属性接口  
}

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

HarmonyOS
2024-09-27 11:03:45
浏览
收藏 0
回答 1
待解决
回答 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) // 调用系统属性接口  
}
分享
微博
QQ
微信
回复
2024-09-27 17:48:27
相关问题
基于Progress组件进度
488浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
683浏览 • 1回复 待解决
访问控制系统控件有哪些
353浏览 • 1回复 待解决
HarmonyOS中如何动态控制控件属性?
93浏览 • 0回复 待解决
ArkUI中如何获取当前UI控件信息
2110浏览 • 1回复 待解决
鸿蒙怎么实现UI控件样式复用 ?
7691浏览 • 3回复 待解决
可以用JS UI组件来做进度展示吗?
5729浏览 • 1回复 待解决
Progress触摸热区增大demo
826浏览 • 1回复 待解决
如何通过Progress实现loading效果?
354浏览 • 1回复 待解决
HarmonyOS 自定义时间控件和日期控件
250浏览 • 1回复 待解决
HarmonyOS如何查看ArkUI控件源码
485浏览 • 1回复 待解决
HarmonyOS 刷新控件问题
92浏览 • 1回复 待解决