HarmonyOS 鸿蒙Next 圆环状的Progress的颜色值问题

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 圆环状的Progress的颜色值问题

关于圆环状的Progress的颜色值。本来是圆环底色是黑色，进度条是白色，通过animateTo继续调整rotate的角度，实现loading效果。
现在有一台真机最近升级了系统后，发现进度条颜色变成了从浅蓝色到蓝色的渐变色了。
我是在onDidBuild生命周期中执行animateTo方法，不确定是不是这里引起的。因为如果我不执行animateTo，保持静态的Progress，颜色是正常的。
如果不允许在onDidBuild执行animateTo，那么我应该怎么实现这个显示了loading组件就开始动画的效果。
我自己尝试了一下，在onDidBuild中通过setTimeout延时执行animateTo方法，是可行的。甚至我在demo中把延时时长设置为0都可以。
但在真实项目的话，这种延时方案不稳妥吧，这个延时时长设置多少才合适我也拿不准。

看官方文档也没有找到相关对应的api更新介绍。

Harmonyos Next教程
2 回复 
  
onDidBuild 函数在执行自定义组件的 build() 函数之后执行。不建议在 onDidBuild 函数中更改状态变量、使用 animateTo 等功能，这可能会导致不稳定的 UI 表现。
  
建议通过 onAppear 通用事件来实现动画效果，示例代码片段如下：
  
  
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = 'Hello World';
  [@State](/user/State) rotateValue: number = 0;

build() {
RelativeContainer() {
Text(this.message)
.id(‘HelloWorld’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
Progress({ value: 28, total: 100, type: ProgressType.Ring })
.width(40)
.height(40)
.rotate({ angle: this.rotateValue })
.backgroundColor(Color.Black)
.color(Color.White)
.style({ strokeWidth: 4, scaleWidth: 4 })
.margin({ top: 40 })
.alignRules({
top: { anchor: ‘HelloWorld’, align: VerticalAlign.Bottom },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
// 使用 onAppear 来执行 animateTo 动画
.onAppear(() => {
animateTo({ curve: Curve.Linear, duration: 1000, iterations: -1 }, () => {
this.rotateValue = 360;
})
})
}
.height(‘100%’)
.width(‘100%’)
}
}




  

  

    

      
    

  




          
        

  

    
      

    
    

      
        
        
          
        
      
      
      
        
      
    

  

  

    
在HarmonyOS鸿蒙Next中，圆环状的Progress组件的颜色值可以通过多种方式进行设置。


首先，可以在创建Progress组件时，通过.color()方法直接设置前景色。例如：


Progress({value: 40, total: 150, type: ProgressType.Ring})
  .width(100)
  .height(100)
  .color(Color.Grey); // 设置前景色为灰色

其次，如果使用的是XML布局文件，可以通过ohos:progressColor属性来设置圆环进度条的颜色。例如：


<ohos.agp.components.Progress
    ohos:id="$+id:ring_progress"
    ohos:height="200vp"
    ohos:width="200vp"
    ohos:progress="50"
    ohos:min="0"
    ohos:max="100"
    ohos:progressColor="#FF0000" /> <!-- 设置进度条颜色为红色 -->

此外，如果需要设置渐变色，可以通过编程方式动态设置。例如，在Java代码中获取Progress组件后，使用setBarGradientColor方法设置渐变色。


如果以上方法无法解决问题，可能是组件属性设置不当或版本差异导致。建议检查组件属性和HarmonyOS版本，确保设置正确且符合当前版本要求。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。



  

  

    

      
    

  




          
    

    
      











      
  

  
回到顶部