?

在應(yīng)用開(kāi)發(fā)的過(guò)程中，經(jīng)常有需要表示“加載中”或者“請(qǐng)等待”的這么一個(gè)狀態(tài)提示，我原來(lái)的做法是會(huì)通過(guò)找一張gif圖片來(lái)表示這一狀態(tài)，但是如果使用gif圖片的話，會(huì)有以下幾個(gè)問(wèn)題

1. 在不同頁(yè)面中，需要顯示不同的顏色來(lái)適配頁(yè)面的整體配色風(fēng)格，但是gif動(dòng)圖是不可能說(shuō)動(dòng)態(tài)的去設(shè)置顏色的，這使得在一些頁(yè)面中顯得與整體設(shè)計(jì)風(fēng)格不相符合，如果說(shuō)每個(gè)頁(yè)面都單獨(dú)去準(zhǔn)備一個(gè)gif動(dòng)圖的話，工作量又太大，不合適

2. 同樣的原因，就不方便

2. 多一張動(dòng)圖總歸會(huì)對(duì)安裝包的整體大小有影響

3. 當(dāng)項(xiàng)目中有下拉刷新功能時(shí)，會(huì)看到下拉刷新也有一個(gè)“刷新中”的動(dòng)圖，那么一個(gè)項(xiàng)目里，最好就是所有的動(dòng)圖都統(tǒng)一

在學(xué)習(xí)文檔的時(shí)候，我找到了“LoadingProgress”組件，完美的符合我的要求

首先，LoadingProgress可以通過(guò)color屬性來(lái)設(shè)置顏色，官方的說(shuō)法叫“設(shè)置加載進(jìn)度條前景色”，那么也就是說(shuō)可以根據(jù)當(dāng)前頁(yè)面的配色方案進(jìn)行設(shè)置，當(dāng)然，也就可以適配深色模式了

其次，這是一個(gè)組件，那么不存在占空間的問(wèn)題

最后，這就是下拉刷新中的那個(gè)動(dòng)畫(huà)圖片……一摸一樣

解決了我所有的需求

使用起來(lái)也很簡(jiǎn)單，就是當(dāng)一個(gè)正常的組件去寫(xiě)就可以。當(dāng)然，作為一個(gè)要表示“加載中”的組件，他肯定是需要有顯示和隱藏的

對(duì)于這個(gè)問(wèn)題，官方對(duì)這個(gè)組件有一個(gè)單獨(dú)的屬性叫“enableLoading”，默認(rèn)為true，false的話就是不顯示，但當(dāng)其不顯示的時(shí)候（即為false），這個(gè)組件依然占位，這我覺(jué)得其實(shí)是和LoadingProgress的實(shí)際用途背景相悖的，它就應(yīng)該在頁(yè)面數(shù)據(jù)獲取或者某件要等待的事請(qǐng)完成后消失，所以建議使用IF來(lái)進(jìn)行控制

代碼如下：

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)
      }

?

?