• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 刷新本地图片和网络图片
2
3
4在卡片上通常需要展示本地图片或从网络上下载的图片，获取本地图片和网络图片需要通过FormExtensionAbility来实现，如下示例代码介绍了如何在卡片上显示本地图片和网络图片。
5
6
71. 下载网络图片需要使用到网络能力，需要申请ohos.permission.INTERNET权限，配置方式请参见[配置文件权限声明](../security/accesstoken-guidelines.md)。
8
92. 在EntryFormAbility中的onAddForm生命周期回调中实现本地文件的刷新
10
11   ```ts
12   import formBindingData from '@ohos.app.form.formBindingData';
13   import formProvider from '@ohos.app.form.formProvider';
14   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
15   import request from '@ohos.request';
16   import fs from '@ohos.file.fs';
17
18   export default class EntryFormAbility extends FormExtensionAbility {
19     ...
20     // 在添加卡片时，打开一个本地图片并将图片内容传递给卡片页面显示
21     onAddForm(want) {
22       // 假设在当前卡片应用的tmp目录下有一个本地图片：head.PNG
23       let tempDir = this.context.getApplicationContext().tempDir;
24       // 打开本地图片并获取其打开后的fd
25       let file;
26       try {
27         file = fs.openSync(tempDir + '/' + 'head.PNG');
28       } catch (e) {
29         console.error(`openSync failed: ${JSON.stringify(e)}`);
30       }
31       let formData = {
32         'text': 'Image: Bear',
33         'imgName': 'imgBear',
34         'formImages': {
35           'imgBear': file.fd
36         },
37         'loaded': true
38       }
39       // 将fd封装在formData中并返回至卡片页面
40       return formBindingData.createFormBindingData(formData);
41     }
42
43     ...
44   }
45   ```
46
473. 在EntryFormAbility中的onFormEvent生命周期回调中实现网络文件的刷新
48
49   ```ts
50   import formBindingData from '@ohos.app.form.formBindingData';
51   import formProvider from '@ohos.app.form.formProvider';
52   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
53   import request from '@ohos.request';
54   import fs from '@ohos.file.fs';
55
56   export default class EntryFormAbility extends FormExtensionAbility {
57     // 在卡片页面触发message事件时，下载一个网络图片，并将网络图片内容传递给卡片页面显示
58     onFormEvent(formId, message) {
59       let formInfo = formBindingData.createFormBindingData({
60         'text': '刷新中...'
61       })
62       formProvider.updateForm(formId, formInfo)
63       // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒
64       // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上
65       let netFile = 'https://xxxx/xxxx.png'; // 需要在此处使用真实的网络图片下载链接
66       let tempDir = this.context.getApplicationContext().tempDir;
67       let fileName = 'file' + Date.now();
68       let tmpFile = tempDir + '/' + fileName;
69       request.downloadFile(this.context, {
70         url: netFile, filePath: tmpFile, enableMetered: true, enableRoaming: true
71       }).then((task) => {
72         task.on('complete', function callback() {
73           console.info('ArkTSCard download complete:' + tmpFile);
74           let file;
75           try {
76             file = fs.openSync(tmpFile);
77           } catch (e) {
78             console.error(`openSync failed: ${JSON.stringify(e)}`);
79           }
80           let fileInfo = {};
81           fileInfo[fileName] = file.fd;
82           let formData = {
83             'text': 'Image:' + fileName,
84             'imgName': fileName,
85             'formImages': fileInfo,
86             'loaded': true
87           };
88           let formInfo = formBindingData.createFormBindingData(formData)
89           formProvider.updateForm(formId, formInfo).then((data) => {
90             console.info('FormAbility updateForm success.' + JSON.stringify(data));
91           }).catch((error) => {
92             console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
93           })
94         })
95         task.on('fail', function callBack(err) {
96           console.info('ArkTSCard download task failed. Cause:' + err);
97           let formInfo = formBindingData.createFormBindingData({
98             'text': '刷新失败'
99           })
100           formProvider.updateForm(formId, formInfo)
101         });
102       }).catch((err) => {
103         console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
104       });
105     }
106
107     ...
108   };
109   ```
110
1114. 在卡片页面通过Image组件展示EntryFormAbility传递过来的卡片内容。
112
113   ```ts
114   let storage = new LocalStorage();
115   @Entry(storage)
116   @Component
117   struct WidgetCard {
118     @LocalStorageProp('text') text: string = '加载中...';
119     @LocalStorageProp('loaded') loaded: boolean = false;
120     @LocalStorageProp('imgName') imgName: string = 'name';
121
122     build() {
123       Column() {
124         Text(this.text)
125           .fontSize('12vp')
126           .textAlign(TextAlign.Center)
127           .width('100%')
128           .height('15%')
129
130         Row() {
131           if (this.loaded) {
132             Image('memory://' + this.imgName)
133               .width('50%')
134               .height('50%')
135               .margin('5%')
136           } else {
137             Image('common/start.PNG')
138               .width('50%')
139               .height('50%')
140               .margin('5%')
141           }
142         }.alignItems(VerticalAlign.Center)
143         .justifyContent(FlexAlign.Center)
144
145         Button('刷新')
146           .height('15%')
147           .onClick(() => {
148             postCardAction(this, {
149               'action': 'message',
150               'params': {
151                 'info': 'refreshImage'
152               }
153             });
154           })
155       }
156       .width('100%').height('100%')
157       .alignItems(HorizontalAlign.Center)
158       .padding('5%')
159     }
160   }
161   ```
162
163> **说明：**
164> - Image组件通过入参(**memory://fileName**)中的**memory://**标识来进行远端内存图片显示，其中**fileName**需要和EntryFormAbility传递对象(**'formImages': {key: fd})**中的**key**相对应。
165>
166> - Image组件通过传入的参数是否有变化来决定是否刷新图片，因此EntryFormAbility每次传递过来的**imgName**都需要不同，连续传递两个相同的**imgName**时，图片不会刷新。
167