HarmonyOS6 - Progress进度条组件案例

小学生波波2026-01-19 13:33

HarmonyOS6 - Progress进度条组件案例

开发环境为：

开发工具：DevEco Studio 6.0.1 Release

API版本是：API21

本文所有代码都已使用模拟器测试成功！

1. Progress介绍

Progress是进度条组件，用于显示内容加载或操作处理等进度。

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress

2. 实战案例

1. 案例1

1. 效果

效果如下：

2. 代码

代码如下：

js 复制代码

Progress({ value: 10, type: ProgressType.Linear })
    .color('#fffd0000')//设置进度条前景色
    .width('100%')//设置宽度
//strokeWidth:进度条厚度。enableSmoothEffect:进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值
    .style({ strokeWidth: 20, enableSmoothEffect: true })

2. 案例2

1. 效果

效果如下：

2. 代码

代码如下：

js 复制代码

Progress({ value: 70, total: 100, type: ProgressType.Ring })
    .width(180)//设置宽度
    .color('#ffeeba3c')//设置进度条前景色
    .style({ strokeWidth: 20, shadow: true })

最后

希望本文对你有所帮助！
本人如有任何错误或不当之处，请留言指出，谢谢！