在应用开发的过程中,经常有需要表示“加载中”或者“请等待”的这么一个状态提示,我原来的做法是会通过找一张gif图片来表示这一状态,但是如果使用gif图片的话,会有以下几个问题
在不同页面中,需要显示不同的颜色来适配页面的整体配色风格,但是gif动图是不可能说动态的去设置颜色的,这使得在一些页面中显得与整体设计风格不相符合,如果说每个页面都单独去准备一个gif动图的话,工作量又太大,不合适
同样的原因,就不方便
多一张动图总归会对安装包的整体大小有影响
当项目中有下拉刷新功能时,会看到下拉刷新也有一个“刷新中”的动图,那么一个项目里,最好就是所有的动图都统一
在学习文档的时候,我找到了“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)
}
效果图如下: