【HarmonyOS 5】鸿蒙中进度条的使用详解

作者：GeorgeGcs

2025-05-08
上海
本文字数：1655 字
阅读完需：约 5 分钟

【HarmonyOS 5】鸿蒙中进度条的使用详解

一、HarmonyOS 中 Progress 进度条的类型

HarmonyOS 的 ArkUI 框架为开发者提供了多种类型的进度条，每种类型都有其独特的样式，以满足不同的设计需求。以下是几种常见的进度条类型：

线性进度条（Linear）：这是最常见的进度条样式，以直线的形式展示进度。从 API version 9 开始，当组件高度大于宽度时，它会自适应垂直显示；当高度和宽度相等时，保持水平显示。
环形无刻度进度条（Ring）：这种进度条呈环形，通过环形圆环的逐渐填充来显示进度，默认前景色为蓝色，默认 strokeWidth 进度条宽度为 2.0vp。
环形有刻度进度条（ScaleRing）：它显示类似时钟刻度形式的进度展示效果。在头尾两端圆弧处的进度展示效果与圆形样式（Eclipse）相同，中段处的进度展示效果为矩形状长条，与线性样式相似。从 API version 9 开始，当刻度外圈出现重叠时，它会自动转换为环形无刻度进度条。
椭圆形进度条（Eclipse）：显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
胶囊进度条（Capsule）：头尾两端圆弧处的进度展示效果与椭圆形样式（Eclipse）相同，中段处的进度展示效果与线性样式（Linear）相同。当高度大于宽度时，它会自适应垂直显示。

三、使用 ArkTS 创建和设置进度条

（一）创建进度条

在 ArkTS 中，我们通过调用 Progress 接口来创建进度条。以下是创建进度条的基本语法：

Progress({ value: number, total?: number, type?: ProgressType })

复制代码

（二）设置进度条样式

我们可以在创建进度条时，通过设置ProgressType枚举类型给type可选项指定不同的进度条类型，从而实现多样化的样式。以下是不同类型进度条的设置示例：

线性进度条：

Progress({ value: 50, total: 100, type: ProgressType.Linear })

复制代码

环形无刻度进度条：

Progress({ value: 30, total: 100, type: ProgressType.Ring })

复制代码

环形有刻度进度条：

Progress({ value: 70, total: 100, type: ProgressType.ScaleRing })

复制代码

椭圆形进度条：

Progress({ value: 10, total: 100, type: ProgressType.Eclipse })

复制代码

胶囊进度条：

Progress({ value: 45, total: 100, type: ProgressType.Capsule })

复制代码

（三）动态更新进度

进度条的关键功能之一是能够在任务执行过程中动态更新进度，以反映任务的实时进展。

在鸿蒙 Progress 组件中通过 value 和 total 两个属性来实现进度条得更新效果，源码如下：

其中，value用于设置初始进度值，total用于设置进度总长度，type决定 Progress 的样式。如果不设置type，默认使用线性进度条样式。

Progress({ value: 24, total: 100, type: ProgressType.Linear })

复制代码

import prompt from '@ohos.prompt';
@Entry@Componentstruct DownloadProgressBar {  // 下载进度，初始值为 0  @State progress: number = 0;  // 下载状态提示信息  @State status: string = '等待下载';
  // 模拟下载的函数  startDownload() {    // 模拟下载过程，使用 setInterval 定时更新进度    let intervalId = setInterval(() => {      this.progress += 10;      if (this.progress >= 100) {        this.status = '下载完成';        clearInterval(intervalId);        prompt.showToast({ message: '下载已完成' });      } else {        this.status = `下载中，进度: ${this.progress}%`;      }    }, 1000);  }
  build() {    Column({ space: 20 }) {      Text('下载进度条示例')        .fontSize(20)        .fontWeight(FontWeight.Bold);
      Progress({ value: this.progress, total: 100 })        .width('90%')        .height(20);
      Text(this.status)        .fontSize(16);
      Button('开始下载')        .width('60%')        .height(40)        .backgroundColor(Color.Blue)        .fontColor(Color.White)        .onClick(() => {          this.startDownload();        });    }    .width('100%')    .height('100%')    .alignItems(HorizontalAlign.Center)    .justifyContent(FlexAlign.Center);  }}

复制代码

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/e27ec4006e8764a8f2480ae51】。文章转载请联系作者。

GeorgeGcs

关注

路漫漫其修远兮，吾将上下而求索。 2024-12-24 加入

历经腾讯，宝马，研究所，金融。待过私企，外企，央企。深耕大应用开发领域十年。 OpenHarmony，HarmonyOS，Flutter，H5，Android，IOS。目前任职鸿蒙应用架构师。 HarmonyOS官方认证创作先锋，华为开发专家HDE。

发布

暂无评论

创作场景

【HarmonyOS 5】鸿蒙中进度条的使用详解

【HarmonyOS 5】鸿蒙中进度条的使用详解

一、HarmonyOS 中 Progress 进度条的类型

三、使用 ArkTS 创建和设置进度条

（一）创建进度条

（二）设置进度条样式

（三）动态更新进度

GeorgeGcs

评论