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

在HarmonyOS Next中可通过构建一个独立的CircularProgressBar组件来实现半圆环进度条，以下为组件的完整实现:

@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')
  }
}