HarmonyOS 鸿蒙Next：progress设置前景为渐变色时，渐变色不生效

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

HarmonyOS 鸿蒙Next：progress设置前景为渐变色时，渐变色不生效

progress设置前景为渐变色时，渐变色不生效 代码如下:

Row() { Progress({ value: 20, total: 100, type: ProgressType.Linear, }) .style({ strokeWidth: 10, scaleCount: 10, scaleWidth: 3 }) .backgroundColor(’#f9f0df’) .color({//渐变色 direction: GradientDirection.Right, colors: [[’#F08B35’, 0.0], [’#ED5D2A’, 1.0],] }) .height(20) .layoutWeight(1) .margin({ right: 5 }) Text(‘已抢11%’) .fontSize(11) .fontColor(’#FD6E49’) }

渐变色从左往右开始渐变 使用progress时前景色，设置为渐变无效


更多关于HarmonyOS 鸿蒙Next：progress设置前景为渐变色时，渐变色不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

目前的规格就只有环性进度条支持渐变色,请参考文档说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-progress-V5#color 目前的规格就只有环性进度条支持渐变色,只有type:为ProgressType.Ring时设置渐变色才有效，文档中已有明确说明

可通过canvas自定义一个progress实现想要的效果。

可参考以下代码：

``` // xxx.ets

@Entry @Component struct Arc { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) @State @Watch(‘onCountUpdated’) radianTest :number = 95 @State color:string="#ff144cd2" //"#ff144cd2" @State progressWidth:number = 180 onCountUpdated(): void { this.drawProgress() } drawProgress=():void=>{ let offContext = this.offCanvas.getContext(“2d”, this.settings) offContext.lineCap = “round” offContext.lineWidth=8 offContext.beginPath() offContext.moveTo(100, 75) offContext.lineTo(100+this.progressWidth, 75) offContext.strokeStyle = “#ff8c909b” offContext.stroke() offContext.beginPath() offContext.moveTo(100, 75) offContext.lineTo(this.radianTest===0?100:this.progressWidth*(this.radianTest)/100+100, 75) let grad =offContext.createLinearGradient(100,75, this.radianTest===0?100:this.progressWidth*(this.radianTest)/100+100,75) grad.addColorStop(0.0, ‘#F08B35’) grad.addColorStop(1.0, ‘#ffb3ed2a’) offContext.strokeStyle =grad offContext.stroke() let image = this.offCanvas.transferToImageBitmap() this.context.transferFromImageBitmap(image) } build() { Column(){ Canvas(this.context) .width(‘100%’) .height(‘100%’) .backgroundColor(’#ffff00’) .onReady( this.drawProgress ) Button(this.radianTest+’’) .onClick(()=>{ this.color = “#ff144cd2” this.radianTest = Number(this.radianTest+1) if(this.radianTest>100){ this.radianTest=0 } }) } .width(‘100%’) .height(500) } } ``

更多关于HarmonyOS 鸿蒙Next：progress设置前景为渐变色时，渐变色不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对帖子标题“HarmonyOS 鸿蒙Next：progress设置前景为渐变色时，渐变色不生效”的问题，以下是专业解答：

在HarmonyOS中，若progress组件设置前景为渐变色时未生效，可能原因及解决方案如下：

  1. 属性设置错误：确保在XML或代码中正确设置了progress组件的渐变色属性。检查是否有拼写错误或属性设置遗漏。

  2. 版本兼容性：不同版本的HarmonyOS可能对渐变色支持存在差异。确认当前使用的HarmonyOS版本是否支持在progress组件上应用渐变色。

  3. 样式冲突：检查是否有其他样式或主题覆盖了progress组件的渐变色设置。确保渐变色设置未被其他样式覆盖。

  4. 资源加载问题：确保渐变色资源文件（如XML定义的drawable）已正确放置在res目录下，且资源ID在代码中引用正确。

  5. 代码逻辑错误：若通过代码动态设置渐变色，检查相关逻辑是否正确执行，包括资源加载、属性设置等步骤。

若以上检查均无误，但问题依旧存在，可能是系统bug或特定环境下的兼容性问题。此时，建议联系HarmonyOS官方客服或访问官网获取进一步支持。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部