HarmonyOS 鸿蒙Next 自定义组件-圆形进度

效果:

自定义组件:

/**
 * 圆形进度
 */
@Component
export struct CircularProgress {
  // 进度
  @State curretProgress: number = 0
  // 进度条颜色
  @State progressColor:number = Color.Green
  // 最大进度
  maxProgress: number = 100
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  sizeRes: SizeResult = {
    width: 0,
    height: 0
  }

  build() {
    Row() {
      Canvas(this.context)
        .width(‘100%’)
        .height(‘100%’)
        .onReady(() => {
          //内圆
          this.context.beginPath()
          this.context.lineWidth = 2
          this.context.strokeStyle = this.progressColor
          this.context.arc(this.sizeRes.width / 2, this.sizeRes.height / 2, 100, 0, 2 * Math.PI)
          this.context.stroke();
          // 外圆
          this.context.beginPath()
          this.context.lineWidth = 2
          this.context.strokeStyle = this.progressColor
          this.context.arc(this.sizeRes.width / 2, this.sizeRes.height / 2, 120, 0, 2 * Math.PI)
          this.context.stroke()
          // 进度条
          this.context.beginPath()
          this.context.lineWidth = 20
          this.context.lineCap = “round”
          this.context.strokeStyle = this.progressColor
          this.context.arc(this.sizeRes.width / 2, this.sizeRes.height / 2, 110, 0,
            2 * Math.PI * (this.curretProgress / this.maxProgress))
          this.context.stroke()
        })
    }.width(‘100%’).height(‘100%’).justifyContent(FlexAlign.Center)
  }

  onMeasureSize(selfLayoutInfo: GeometryInfo, children: Measurable[], constraint: ConstraintSizeOptions): SizeResult {
    children[0].measure({
      minWidth: 0,
      minHeight: 0,
      maxWidth: selfLayoutInfo.width,
      maxHeight: selfLayoutInfo.height
    })

    return this.sizeRes = {
      width: selfLayoutInfo.width,
      height: selfLayoutInfo.height
    }
  }
}

用法:

import { CircularProgress } from ‘ets/pages/component/CircularProgress’

@Entry
@Component
struct Index {
  build() {
    Column() {
      CircularProgress({ curretProgress: 25, progressColor: Color.Green })
    }.width(‘100%’).height(‘50%’)
  }
}