【HarmonyOS NEXT】组件能力如何实现环形渐变效果

 【关键字】

Gauge组件 / 环形图表 / 渐变效果 / LinearGradient

【问题描述】

问题一：

API10版本中使用Gauge组件无法实现渐变效果，并且会有箭头显示，progress组件中已删除arc这种样式，无法实现UI要求。

问题二：

LinearGradient可以设置单个吗？因为必须要传2个及以上值，但是渐变开始到结束只给了2个值，无法编辑成数组传递进去。箭头可以有方法隐藏掉吗？

【解决方案】

问题一：

升级API11版本，从API version 11开始，Gauge支持设置color属性：当参数类型为LinearGradient，则圆环类型为渐变环。

Gauge参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-gauge-0000001862607397

progress组件现支持的样式可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-progress-indicator-0000001813575880

问题二：

LinearGradient设置单个是因为只有一个色值组，从A到B这一个渐变色，箭头是可以隐藏的。

示例参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-gauge-0000001862607397#ZH-CN_TOPIC_0000001862607397__示例

如下代码实现你需要的效果，其中this.value代表完成度，颜色使用你自己的配色：

.colors([[new LinearGradient([{ color: "#ff1590fd", offset: 0 }, { color: "#8a01b6ff", offset: 1}]), this.value],
[new LinearGradient([{ color: "#5bb7defc", offset: 1 }]), 100 - this.value]]).description(null)