实现渐变前景色鸿蒙示例代码

Gauge({ value: this.value, min: 1, max: 100 }) {
  Column() {
    Text(this.value.toString())
      .fontWeight(FontWeight.Medium)
      .width('62%')
      .fontColor('#ff182431')
      .maxFontSize('60.0vp')
      .minFontSize('30.0vp')
      .textAlign(TextAlign.Center)
      .margin({ top: '35%' })
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .maxLines(1)
  }.width('100%').height('100%')
}
.startAngle(210)
  .endAngle(150)
  .colors([[new LinearGradient([{ color: '#deb6fb', offset: 0 }, { color: '#ac49f5', offset: 1 }]), this.value],
    [new LinearGradient([{ color: '#bbb7fc', offset: 0 }, { color: '#bbb7fc', offset: 1 }]), 100 - this.value]])
  .width('80%')
  .height('80%')
  .strokeWidth(18)
  .description(this.descriptionBuilder)
  .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
  .padding(18)
  .indicator(null)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.