HarmonyOS开发之Progress进度条

在HarmonyOS应用开发中，Progress组件被广泛用于展示任务完成的进度。本文将介绍如何使用Progress组件创建三种不同的进度条效果：反向进度条、自定义电池电量显示以及扇形圆弧进度条。

场景一：反向进度条

效果

创建一个倒计时样式的进度条，从100%逐渐减少至0%。

方案

1. Progress组件从100→0加载。
2. 将圆形Progress组件按照y轴旋转180°。

核心代码

@Component
export struct ReverseProgress {
  @State progressValue: number = 100
  @State animationId: number | null = null

  build() {
    NavDestination() {
      Column({ space: 15 }) {
        Progress({ value: 0, total: 100, type: ProgressType.Ring })
          .color('#A97CF9')
          .value(this.progressValue)
          .width(100)
          .style({
            strokeWidth: 10,
            scaleCount: 20,
            scaleWidth: 5,
            enableSmoothEffect: true
          })
          .backgroundColor(Color.White)
          .rotate({
            x: 0,
            y: 1,
            z: 0,
            centerX: '50%',
            centerY: '50%',
            angle: 180
          })

        Button('开始动画')
          .onClick(() => {
            if (this.animationId === null) {
              this.animationId = setInterval(() => {
                this.progressValue--;
                if (this.progressValue <= 0) {
                  this.progressValue = 100;
                }
              }, 10);
            }
            console.log(this.animationId.toString());
          })

        Button('结束动画')
          .onClick(() => {
            clearInterval(this.animationId);
            this.animationId = null;
            this.progressValue = 100;
          })
      }
      .width('100%')
      .padding({ top: 5 })
      .backgroundColor(Color.Red)
    }
  }
}

场景二：自定义电池电量的显示

效果

设计一个类似于电池电量显示的进度条，具有定制化的外观。

方案

使用clip属性来裁剪Progress组件，使其适应特定的形状。

核心代码

@Component
export struct ClipProgress {
  build() {
    NavDestination() {
      Column({ space: 15 }) {
        Text('Linear Progress')
          .fontSize(9)
          .fontColor(0xCCCCCC)
          .width('90%')

        Progress({ value: 20, total: 100, type: ProgressType.Linear })
          .width(200)
          .backgroundColor('#DDDDDD')
          .style({ strokeRadius: 0, strokeWidth: 100 })
          .color('#B1B1B1')
          .borderColor('#00000000')
          .borderRadius(20)
          .clip(true)
      }
      .width('100%')
      .height('100%')
      .margin({ top: 30 })
      .backgroundColor('#F6F6F6')
    }
  }
}

场景三：扇形圆弧进度条

效果

创建一个扇形的圆弧进度条，模拟类似流量码表的效果。

方案

对于复杂的形状，可以考虑使用Canvas来绘制自定义进度条。

核心代码

@Component
export struct WidgetsProgress {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  @State @Watch('onCountUpdated') radianTest: number = 0
  @State color: string = '#ff8c909b'

  onCountUpdated(): void {
    this.canvasTest();
  }

  canvasTest = (): void => {
    let offContext = this.offCanvas.getContext('2d', this.settings);
    offContext.lineCap = 'round';
    offContext.lineWidth = 8;
    offContext.beginPath();
    offContext.arc(
      100,
      75,
      50,
      (225 - 90) * Math.PI / 180,
      (135 - 90) * Math.PI / 180
    );
    offContext.strokeStyle = '#ff8c909b';
    offContext.stroke();

    offContext.beginPath();
    offContext.arc(
      100,
      75,
      50,
      (225 - 90) * (Math.PI / 180),
      this.radianTest === 0
        ? (135 - 90) * (Math.PI / 180)
        : (135 - 270 * (1 - this.radianTest) - 90) * (Math.PI / 180),
    );
    offContext.strokeStyle = this.color;
    offContext.stroke();

    let image = this.offCanvas.transferToImageBitmap();
    this.context.transferFromImageBitmap(image);
  }

  build() {
    NavDestination() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(
            this.canvasTest
          )

        Button('测试')
          .onClick(() => {
            this.color = '#ff144cd2';
            this.radianTest += 0.01;
            if (this.radianTest > 1) {
              this.radianTest = 0;
            }
          })
      }
      .width('100%')
      .height(500)
    }
  }
}

总结

通过以上示例，我们展示了如何使用HarmonyOS的Progress组件以及Canvas来创建各种各样的进度条效果。无论是简单的反向进度条还是复杂的自定义形状，Progress组件和Canvas都能满足你的需求。这些技巧可以帮助你提高应用程序的用户体验，让它们看起来更加独特和吸引人。