HarmonyOS如何使用Progress中的ring圆环加载样式

HarmonyOS如何使用Progress中的ring圆环加载样式

HarmonyOS
2024-08-09 11:41:44
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

demo如下:

@Entry 
@Component 
struct Progress_Ring { 
  @State progressValue: number = 100 
  @State animationId: number | null = null 
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Transparent, offset: 0.2 }, 
    { color: Color.White, offset: 0.5 }]) 
  build() { 
    Column({ space: 15 }) { 
      Progress({ value: 0, total: 100, type: ProgressType.Ring }) 
         .color("#00FFFFF") 
        .value(this.progressValue) 
        .width(100) 
        .style({ strokeWidth: 10, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true }) 
        .backgroundColor(Color.White) 
        .rotate({ 
          x: 0, 
          y: 1, 
          z: 0, 
          centerX: '50%', 
          centerY: '50%', 
          angle: 180 
        }) 
      Button('开始动画').onClick(() => { 
        if (this.animationId === null) { 
          this.animationId = setInterval(() => { 
            this.progressValue-- 
            if (this.progressValue == 0) { 
              this.progressValue = 100 
            } 
          }, 10) 
        } 
        console.log(this.animationId.toString()) 
      }) 
      Button('结束动画').onClick(() => { 
        clearInterval(this.animationId) 
        this.animationId = null 
        this.progressValue = 100 
      }) 
    }.width('100%').padding({ top: 5 }).backgroundColor(Color.Red) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-09 18:27:21
相关问题
LoadingProgress如何修改加载动画样式
1599浏览 • 1回复 待解决
HarmonyOS 如何设定tabs组件tabbar样式
220浏览 • 1回复 待解决
如何通过Progress实现loading效果?
173浏览 • 1回复 待解决
基于Progress组件进度条
239浏览 • 1回复 待解决
HarmonyOS 使用Web组件加载页面示例
129浏览 • 1回复 待解决
Web组件加载如何实现?
671浏览 • 1回复 待解决
Progress触摸热区增大demo
632浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
160浏览 • 1回复 待解决
如何设置Swiper导航点样式
209浏览 • 1回复 待解决
@Extend样式如何跨组件共享?
2105浏览 • 1回复 待解决