鸿蒙Progress进度条多种样式方案说明和源码DEMO提供

一、结论

HarmonyOS的ArkUI框架，提供了Progress组件，通过设置ProgressType，能实现以下多种类型的进度条：

1、线性进度条（Linear）：这是最常见的进度条样式，以直线的形式展示进度。从API version 9开始，当组件高度大于宽度时，它会自适应垂直显示；当高度和宽度相等时，保持水平显示。

2、环形无刻度进度条（Ring）：这种进度条呈环形，通过环形圆环的逐渐填充来显示进度，默认前景色为蓝色，默认strokeWidth进度条宽度为2.0vp。

3、 环形有刻度进度条（ScaleRing）：它显示类似时钟刻度形式的进度展示效果。在头尾两端圆弧处的进度展示效果与圆形样式（Eclipse）相同，中段处的进度展示效果为矩形状长条，与线性样式相似。从API version 9开始，当刻度外圈出现重叠时，它会自动转换为环形无刻度进度条。

4、 椭圆形进度条（Eclipse）：显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。

5、胶囊进度条（Capsule）：头尾两端圆弧处的进度展示效果与椭圆形样式（Eclipse）相同，中段处的进度展示效果与线性样式（Linear）相同。当高度大于宽度时，它会自适应垂直显示。

二、代码实现和详细解释

/**
 * 弹窗样式测试页面
 */
@Entry
@Component
struct ProgressStyleTest{
  build() {
    Column({ space: 30 }) {
      // 1. 线性进度条（基金申购进度）
      this.buildLinearProgress();
      // 2. 环形无刻度进度条（收益计算）
      this.buildRingProgress();
      // 3. 环形有刻度进度条（定投完成度）
      this.buildScaleRingProgress();
      // 4. 椭圆形进度条（支付验证）
      this.buildEclipseProgress();
      // 5. 胶囊进度条（大额转账验证）
      this.buildCapsuleProgress();
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor("#F5F5F5"); // 金融APP通用背景色
  }

  // 线性进度条（基金申购）
  @Builder
  buildLinearProgress() {
    Column({ space: 10 }) {
      Text("基金申购进度（65%）")
        .fontSize(16)
        .fontColor("#1A1A1A");
      Progress({ value: 65, total: 100, type: ProgressType.Linear })
        .width('90%')
        .height(18)
        .color("#0066CC") // 金融蓝（银行品牌色）
        .backgroundColor("#E5E5E5")
        .animation({ duration: 500, curve: Curve.EaseInOut });
    }
  }

  // 环形无刻度进度条（收益计算）
  @Builder
  buildRingProgress() {
    Column({ space: 10 }) {
      Text("理财收益计算中（78%）")
        .fontSize(16)
        .fontColor("#1A1A1A");
      Progress({ value: 78, total: 100, type: ProgressType.Ring })
        .width(80)
        .height(80)
        .color("#009966"); // 金融绿（代表收益/成功）
    }
  }

  // 环形有刻度进度条（定投完成度）
  @Builder
  buildScaleRingProgress() {
    Column({ space: 10 }) {
      Text("定投计划完成度（8/12期）")
        .fontSize(16)
        .fontColor("#1A1A1A");
      Progress({ value: 8, total: 12, type: ProgressType.ScaleRing })
        .width(100)
        .height(100)
        .color("#FF6600"); // 金融橙（中性色调）
    }
  }

  // 椭圆形进度条（支付验证）
  @Builder
  buildEclipseProgress() {
    Column({ space: 10 }) {
      Text("支付验证中（45%）")
        .fontSize(16)
        .fontColor("#1A1A1A");
      Progress({ value: 45, total: 100, type: ProgressType.Eclipse })
        .width(60)
        .height(60)
        .color("#CC0000"); // 金融红（支付场景）
    }
  }

  // 胶囊进度条（大额转账验证）
  @Builder
  buildCapsuleProgress() {
    Column({ space: 10 }) {
      Text("大额转账身份验证（90%）")
        .fontSize(16)
        .fontColor("#1A1A1A");
      Progress({ value: 90, total: 100, type: ProgressType.Capsule })
        .width('90%')
        .height(24)
        .color("#0066CC")
        .backgroundColor("#E5E5E5");
    }
  }
}

三、引用资料地址

1、进度条官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress