ArkUI Progress：进度条会说话，等待就没那么焦虑

这篇我们看 Progress。

等待本身不可怕，可怕的是不知道等到哪了。Progress 的任务就是给用户一个明确预期：刚开始、进行中、快结束，页面要说得出来。

这个 Demo 只做静态进度展示：线性进度、环形进度、胶囊进度，以及高低进度对比。不模拟异步下载，也不写定时器。

参考文档：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development

基本进度由 value 和 total 决定

最常见写法是：

Progress({ value: 28, total: 100, type: ProgressType.Linear })
  .color('#2563EB')

value 是当前值，total 是总量。用 100 做总量时，读起来就像百分比。

案例里放了 28% 和 82% 两条进度。低进度要让人知道任务刚开始，高进度则给人“快结束”的预期。

Linear 适合长任务

线性进度条适合上传、导入、生成报告这些任务。它占一整行，方向清楚，用户一眼能扫到。

Progress({ value: 82, total: 100, type: ProgressType.Linear })
  .width('100%')
  .height(8)

进度条旁边最好配一点文字。只给一条蓝线，用户不知道它代表上传、生成还是同步。

Ring 和 Eclipse 适合卡片

空间不够放长条时，可以用环形。

Progress({ value: 64, total: 100, type: ProgressType.Ring })
  .width(92)
  .height(92)

Ring 和 Eclipse 都适合放在卡片里，做一个紧凑的状态概览。不要在一屏里放太多环形进度，不然视觉会很碎。

Capsule 更像状态条

Progress({ value: 55, total: 100, type: ProgressType.Capsule })
  .height(28)

胶囊进度更像一个状态条，适合放在卡片或列表项里。它比普通线性条更醒目，但又没有环形那么占空间。

打开案例页时，可以先问自己：这个任务需要长条、环形，还是胶囊？如果只是轻量等待，别把进度做得过重；如果是长任务，也别只给一个转圈。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/basic/ArkUIProgressDemo.ets

@Entry
@Component
struct ArkUIProgressDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  linearBlock(title: string, desc: string, value: number, color: string, bgColor: string) {
    Column({ space: 10 }) {
      Row() {
        Text(title)
          .fontSize(15)
          .fontWeight(700)
          .fontColor('#0F172A')
          .layoutWeight(1)

        Text(value.toString() + '%')
          .fontSize(14)
          .fontWeight(700)
          .fontColor(color)
      }
      .width('100%')

      Text(desc)
        .width('100%')
        .fontSize(12)
        .fontColor('#64748B')
        .lineHeight(18)

      Progress({ value: value, total: 100, type: ProgressType.Linear })
        .width('100%')
        .height(8)
        .color(color)
    }
    .width('100%')
    .padding(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: bgColor })
    .borderRadius(8)
  }

  @Builder
  circleBlock(title: string, value: number, type: ProgressType, color: string) {
    Column({ space: 8 }) {
      Progress({ value: value, total: 100, type: type })
        .width(92)
        .height(92)
        .color(color)

      Text(title)
        .fontSize(13)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(value.toString() + '%')
        .fontSize(12)
        .fontColor('#64748B')
    }
    .layoutWeight(1)
    .padding(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E2E8F0' })
    .borderRadius(8)
    .alignItems(HorizontalAlign.Center)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Progress')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('进度条会说话，等待就没那么焦虑')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看 Progress 自己：线性进度、环形进度、胶囊进度和高低进度对比。不模拟下载，也不写定时器。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('线性进度适合长任务', '上传、导入、生成报告这类任务，用户最关心已经走到哪。')

          this.linearBlock('资料上传中', '低进度要让人知道任务刚开始，不要假装快完成。', 28, '#2563EB', '#BFDBFE')
          this.linearBlock('报告生成中', '高进度适合给用户一个快结束的预期。', 82, '#0F766E', '#99F6E4')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('环形进度适合短信息卡片', '空间不够放长条时，可以用 Ring 或 Eclipse 做紧凑展示。')

          Row({ space: 10 }) {
            this.circleBlock('Ring', 64, ProgressType.Ring, '#7C3AED')
            this.circleBlock('Eclipse', 46, ProgressType.Eclipse, '#C2410C')
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('Capsule 更像状态条', '胶囊进度适合放在卡片里，既能看进度，也不会太抢视线。')

          Progress({ value: 55, total: 100, type: ProgressType.Capsule })
            .width('100%')
            .height(28)
            .color('#0F766E')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}