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

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


##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#

一、HarmonyOS中Progress进度条的类型

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

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

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

(一)创建进度条

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

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


(二)设置进度条样式

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

  1. 线性进度条
Progress({ value: 50, total: 100, type: ProgressType.Linear })
  1. 环形无刻度进度条
Progress({ value: 30, total: 100, type: ProgressType.Ring })
  1. 环形有刻度进度条
Progress({ value: 70, total: 100, type: ProgressType.ScaleRing })
  1. 椭圆形进度条
Progress({ value: 10, total: 100, type: ProgressType.Eclipse })
  1. 胶囊进度条
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
@Component
struct 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);
  }
}
目录
相关文章
【鸿蒙软件开发】进度条Progress
【鸿蒙软件开发】进度条Progress
422 0
|
数据安全/隐私保护
【鸿蒙软件开发】文本输入(TextInput/TextArea)
【鸿蒙软件开发】文本输入(TextInput/TextArea)
1495 0
|
4月前
|
物联网 开发工具
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
121 9
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
|
4月前
|
前端开发 JavaScript API
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
2025年是鸿蒙生态迎来关键发展期。根据前几天的2025 HDC数据显示,鸿蒙原生应用数量已从2024年的2000款增长至5000款,微信鸿蒙版安装量突破1.2亿,公安部交管系统完成全国300城鸿蒙适配。
302 1
|
4月前
|
存储 安全 API
【HarmonyOS 5】鸿蒙应用隐私保护详解
【HarmonyOS 5】鸿蒙应用隐私保护详解
163 1
|
4月前
|
开发工具
【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案
openCustomDialog提供了onWillDismiss回调函数,当用户尝试通过滑动、点击外部、返回键等操作关闭弹窗时,会触发该回调。通过在回调中判断关闭原因并拦截操作,即可实现禁止手势关闭的效果。
125 1
|
4月前
|
定位技术 开发工具 开发者
【HarmonyOS 5】桌面快捷方式功能实现详解
在移动应用开发中,如何让用户快速触达核心功能,是目前很常见的功能之一。 鸿蒙系统提供的**桌面快捷方式(Shortcuts)**功能,允许开发者为应用内常用功能创建直达入口,用户通过长按应用图标即可快速启动特定功能,大幅减少操作层级。 本文将结合地图导航场景,详细解析鸿蒙快捷方式的实现原理与开发流程。结合华为官方开源示例 DesktopShortcut 展开,该示例基于HarmonyOS 5.0实现,完整演示了地图导航场景的快捷方式开发流程。
236 0
|
4月前
|
移动开发 Dart 前端开发
【HarmonyOS 5】鸿蒙跨平台开发方案详解(二)
作为最早实现鸿蒙适配的跨平台框架,Flutter在社区推动下已形成较完整的技术方案。当前鸿蒙版Flutter已发布3.22.0-ohos版本,该版本基于Flutter 3.22.0核心。
264 0
|
4月前
|
消息中间件 物联网 开发工具
【HarmonyOS 5】鸿蒙中如何使用MQTT
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是一种轻量级、基于发布 / 订阅(Publish/Subscribe)模式的即时通讯协议,专为资源受限的物联网(IoT)设备和低带宽、高延迟或不可靠网络环境设计。
238 0
|
4月前
|
传感器 自动驾驶 物联网
【HarmonyOS 5】鸿蒙星闪NearLink详解
鸿蒙星闪NearLink Kit 是 HarmonyOS 提供的短距离通信服务,支持星闪设备间的连接、数据交互。例如,手机可作为中心设备与外围设备(如鼠标、手写笔、智能家电、车钥匙等)通过星闪进行连接。
130 0