刷新本地圖片和網(wǎng)絡(luò)圖片

在卡片上通常需要展示本地圖片或從網(wǎng)絡(luò)上下載的圖片，獲取本地圖片和網(wǎng)絡(luò)圖片需要通過FormExtensionAbility來實(shí)現(xiàn)，如下示例代碼介紹了如何在卡片上顯示本地圖片和網(wǎng)絡(luò)圖片。

1. 下載網(wǎng)絡(luò)圖片需要使用到網(wǎng)絡(luò)能力，需要申請(qǐng)ohos.permission.INTERNET權(quán)限，配置方式請(qǐng)參見配置文件權(quán)限聲明。
2. 在EntryFormAbility中的onAddForm生命周期回調(diào)中實(shí)現(xiàn)本地文件的刷新。

   import formBindingData from '@ohos.app.form.formBindingData';
   import formProvider from '@ohos.app.form.formProvider';
   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
   import request from '@ohos.request';
   import fs from '@ohos.file.fs';
   
   export default class EntryFormAbility extends FormExtensionAbility {
     ...
     // 在添加卡片時(shí)，打開一個(gè)本地圖片并將圖片內(nèi)容傳遞給卡片頁面顯示
     onAddForm(want) {
       // 假設(shè)在當(dāng)前卡片應(yīng)用的tmp目錄下有一個(gè)本地圖片：head.PNG
       let tempDir = this.context.getApplicationContext().tempDir;
       // 打開本地圖片并獲取其打開后的fd
       let file;
       try {
         file = fs.openSync(tempDir + '/' + 'head.PNG');
       } catch (e) {
         console.error(`openSync failed: ${JSON.stringify(e)}`);
       }
       let formData = {
         'text': 'Image: Bear',
         'imgName': 'imgBear',
         'formImages': {
           'imgBear': file.fd
         },
         'loaded': true
       }
       // 將fd封裝在formData中并返回至卡片頁面
       return formBindingData.createFormBindingData(formData);
     }
   
     ...
   }

3. 在EntryFormAbility中的onFormEvent生命周期回調(diào)中實(shí)現(xiàn)網(wǎng)絡(luò)文件的刷新。

   import formBindingData from '@ohos.app.form.formBindingData';
   import formProvider from '@ohos.app.form.formProvider';
   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
   import request from '@ohos.request';
   import fs from '@ohos.file.fs';
   
   export default class EntryFormAbility extends FormExtensionAbility {
     // 在卡片頁面觸發(fā)message事件時(shí)，下載一個(gè)網(wǎng)絡(luò)圖片，并將網(wǎng)絡(luò)圖片內(nèi)容傳遞給卡片頁面顯示
     onFormEvent(formId, message) {
       let formInfo = formBindingData.createFormBindingData({
         'text': '刷新中...'
       })
       formProvider.updateForm(formId, formInfo)
       // 注意：FormExtensionAbility在觸發(fā)生命周期回調(diào)時(shí)被拉起，僅能在后臺(tái)存在5秒
       // 建議下載能快速下載完成的小文件，如在5秒內(nèi)未下載完成，則此次網(wǎng)絡(luò)圖片無法刷新至卡片頁面上
       let netFile = 'https://xxxx/xxxx.png'; // 需要在此處使用真實(shí)的網(wǎng)絡(luò)圖片下載鏈接
       let tempDir = this.context.getApplicationContext().tempDir;
       let tmpFile = tempDir + '/file' + Date.now();
       request.downloadFile(this.context, {
         url: netFile, filePath: tmpFile
       }).then((task) => {
         task.on('complete', function callback() {
           console.info('ArkTSCard download complete:' + tmpFile);
           let file;
           try {
             file = fs.openSync(tmpFile);
           } catch (e) {
             console.error(`openSync failed: ${JSON.stringify(e)}`);
           }
           let formData = {
             'text': 'Image: Https',
             'imgName': 'imgHttps',
             'formImages': {
               'imgHttps': file.fd
             },
             'loaded': true
           }
           let formInfo = formBindingData.createFormBindingData(formData)
           formProvider.updateForm(formId, formInfo).then((data) => {
             console.info('FormAbility updateForm success.' + JSON.stringify(data));
           }).catch((error) => {
             console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
           })
         })
         task.on('fail', function callBack(err) {
           console.info('ArkTSCard download task failed. Cause:' + err);
           let formInfo = formBindingData.createFormBindingData({
             'text': '刷新失敗'
           })
           formProvider.updateForm(formId, formInfo)
         });
       }).catch((err) => {
         console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
       });
     }
   
     ...
   };

4. 在卡片頁面通過Image組件展示EntryFormAbility傳遞過來的卡片內(nèi)容。

   let storage = new LocalStorage();
   
   @Entry(storage)
   @Component
   struct WidgetCard {
     @LocalStorageProp('text') text: string = '加載中...';
     @LocalStorageProp('loaded') loaded: boolean = false;
     @LocalStorageProp('imgName') imgName: string = 'name';
   
     build() {
       Column() {
         Text(this.text)
           .fontSize('12vp')
           .textAlign(TextAlign.Center)
           .width('100%')
           .height('15%')
   
         Row() {
           if (this.loaded) {
             Image('memory://' + this.imgName)
               .width('50%')
               .height('50%')
               .margin('5%')
           } else {
             Image('common/start.PNG')
               .width('50%')
               .height('50%')
               .margin('5%')
           }
         }.alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.Center)
   
         Button('刷新')
           .height('15%')
           .onClick(() => {
             postCardAction(this, {
               'action': 'message',
               'params': {
                 'info': 'refreshImage'
               }
             });
           })
       }
       .width('100%').height('100%')
       .alignItems(HorizontalAlign.Center)
       .padding('5%')
     }
   }