LoadingProgress组件的使用##HarmonyOS应用开发##

2025-05-23 15:28:08
170次阅读
0个评论

​ 在应用开发的过程中,经常有需要表示“加载中”或者“请等待”的这么一个状态提示,我原来的做法是会通过找一张gif图片来表示这一状态,但是如果使用gif图片的话,会有以下几个问题

​1. 在不同页面中,需要显示不同的颜色来适配页面的整体配色风格,但是gif动图是不可能说动态的去设置颜色的,这使得在一些页面中显得与整体设计风格不相符合,如果说每个页面都单独去准备一个gif动图的话,工作量又太大,不合适

​2. 同样的原因,就不方便

​2. 多一张动图总归会对安装包的整体大小有影响

​3. 当项目中有下拉刷新功能时,会看到下拉刷新也有一个“刷新中”的动图,那么一个项目里,最好就是所有的动图都统一

在学习文档的时候,我找到了“LoadingProgress”组件,完美的符合我的要求

首先,LoadingProgress可以通过color属性来设置颜色,官方的说法叫“设置加载进度条前景色”,那么也就是说可以根据当前页面的配色方案进行设置,当然,也就可以适配深色模式了

其次,这是一个组件,那么不存在占空间的问题

最后,这就是下拉刷新中的那个动画图片……一摸一样

解决了我所有的需求

使用起来也很简单,就是当一个正常的组件去写就可以。当然,作为一个要表示“加载中”的组件,他肯定是需要有显示和隐藏的

对于这个问题,官方对这个组件有一个单独的属性叫“enableLoading”,默认为true,false的话就是不显示,但当其不显示的时候(即为false),这个组件依然占位,这我觉得其实是和LoadingProgress的实际用途背景相悖的,它就应该在页面数据获取或者某件要等待的事请完成后消失,所以建议使用IF来进行控制

代码如下:

if(this.list.length > 0){ Column() { LoadingProgress() .width(50) .height(50) .color('#E2873F') Text('加载中...') .fontSize(16) .fontColor('#999999') .margin({ top: 16 }) } .width('100%') .layoutWeight(1) .justifyContent(FlexAlign.Center) }

效果图如下:

微信截图_20250523143557.png

收藏00

登录 后评论。没有帐号? 注册 一个。