HarmonyOS 实战开发 —— 基于Progress组件的进度条


📚往期笔录记录🔖:

🔖鸿蒙(HarmonyOS)北向开发知识点记录~
🔖鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景?
🔖嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~
🔖对于大前端开发来说,转鸿蒙开发究竟是福还是祸?
🔖鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……


场景一:反向进度条

效果

倒计时样式的进度条

方案

注意:这个Progress组件最常见的是和通用属性rotate一起使用,除了上图这种逆向倒计时,还有那种类似于温度计(从下到上加载)的效果,全都是利用rotate。

ArkUI中组件的方向轴示意图:

一般而言,我们的Progress组件都是顺时针从0→100加载的。

1.Progress组件从100→0加载。

2.把这个圆形Progress按照y轴旋转180°,也就是想象一枚硬币翻转一面的样子。

核心代码

@Component
export struct ReverseProgress {
  @State progressValue: number = 100
  @
<think>嗯,用户想了解HarmonyOS中的Progress组件,特别是通过ProgressType设置进度条样式。首先,我需要确认自己对HarmonyOS组件了解是否正确。记得Progress组件主要用于显示任务的进度,比如文件下载或加载过程。 接下来,ProgressType应该有不同的类型,可能包括线性进度条和圆形进度条。需要确认一下官方文档中的具体类型名称,比如Linear和Ring,或者是其他术语?可能还有其他的类型,比如类似Android中的水平或圆形样式。 然后,用户可能想知道如何在代码中使用这些类型。需要说明在ArkTS中如何设置Progress组件的type属性,例如type: ProgressType.Linear。同时,可能需要提到其他可定制的属性,比如颜色、宽度、半径等,以及如何结合样式进行自定义。 还需要考虑用户的实际应用场景,比如下载进度用线性,加载动画用环形。可能需要举一些例子,说明不同样式的适用情况。另外,是否支持动态修改样式,比如根据不同的状态切换类型? 还要注意HarmonyOS的版本差异,确保提供的信息适用于当前主流版本,避免过时的API。如果有多种样式,可能需要详细说明每种样式的参数和效果,帮助用户更好地选择。 最后,总结Progress组件的重要性,强调其在提升用户体验方面的作用。可能需要提醒用户参考官方文档获取最新信息,并确保示例代码的正确性,避免语法错误。</think>在HarmonyOS中,`Progress`是用于显示任务进度的核心组件。通过`ProgressType`可以设置两种基础样式,下面为您详细说明: #### 一、ProgressType 类型 1. **线性进度条(Linear)** ```typescript Progress({ value: 50, // 当前进度值(0-100) type: ProgressType.Linear }) .width('90%') .height(10) ``` - 适用于展示文件下载、数据加载等线性进度场景 - 可通过`style`属性自定义颜色: ```typescript .style({ strokeWidth: 8, // 进度条粗细 foregroundColor: '#007DFF', // 进度颜色 backgroundColor: '#E5E5E5' // 背景色 }) ``` 2. **环形进度条(Ring)** ```typescript Progress({ value: 75, type: ProgressType.Ring }) .width(100) .height(100) ``` - 常用于表示系统加载、操作等待等场景 - 支持环形样式扩展: ```typescript .style({ strokeWidth: 15, // 环的宽度 ringRadius: 50 // 环形半径(需结合宽高调整) }) ``` #### 二、进阶用法 1. **动态绑定数据** ```typescript @State progressValue: number = 0 Progress({ value: this.progressValue }) .onClick(() => { this.progressValue += 10 // 点击增加进度 }) ``` 2. **自定义文本显示** ```typescript Progress({ value: 60 }) .text({ value: '60%', // 显示自定义文本 fontColor: '#FF0000' // 文字颜色 }) ``` #### 三、样式选择建议 | 场景类型 | 推荐样式 | 优势特性 | |----------------|-------------|-----------------------| | 长任务进度跟踪 | Linear | 直观展示进度百分比 | | 短时等待提示 | Ring | 视觉焦点集中 | | 数据可视化 | Ring+文本 | 增强信息传达效果 | > 建议通过`if/else`实现不同场景的样式切换,并配合`animation`属性添加平滑过渡效果。完整API请参考[HarmonyOS Progress组件文档](https://developer.harmonyos.com/cn/docs/design/desktop-components-progress-0000001054297449)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值