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

​

 在应用开发的过程中，经常有需要表示“加载中”或者“请等待”的这么一个状态提示，我原来的做法是会通过找一张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)
      }

审核编辑 黄宇

 

​

​