#鸿蒙通关秘籍#如何在HarmonyOS Next中实现可复用的半圆环进度条组件？

@Component
export default struct CircularProgressBar {
  @Prop title: string = '当前值'
  @Prop radius: number = 150
  @Prop strokeWidth:number=10
  @Prop @Watch('valueChange') currentValue: number = 0
  @Prop maxValue: number = 100
  @Prop color: ResourceColor = '#393D49'
  @Prop activeColor: ResourceColor = '#28B2E3'
  @Prop showPercentage: boolean = true
  @State colors: [ResourceColor | LinearGradient, number][] = []

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Gauge({ value: this.currentValue, max: this.maxValue }) {
          Column() {
            Text(this.title).fontSize(14).lineHeight(25).fontColor('#FFF')
            Text(this.currentValue.toString())
              .fontSize(70)
              .fontColor('#FFF')
              .fontWeight(700)
              .margin({ top: '5%' })
          }.height('100%').width('100%').padding({ top: '12%' })
        }
        .startAngle(270)
        .endAngle(90)
        .strokeWidth(this.strokeWidth)
        .indicator(null)
        .colors(this.colors)
        .width('100%')
        .height(this.radius * 2)
        .trackShadow(null)
        .description(null)
      }.height(this.radius).width('100%').clip(true)

      if (this.showPercentage) {
        Text(this.getPercentageTxt())
          .fontSize(15)
          .fontColor('#FFF')
          .width('100%')
          .textAlign(TextAlign.End)
          .margin({ top: 8 })
          .offset({ x: 8 })
      }
    }.width(this.radius * 2).backgroundColor('#323341')
  }
}
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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.