刷新本地图片和网络图片

2024-01-25 12:22 更新

在卡片上通常需要展示本地图片或从网络上下载的图片,获取本地图片和网络图片需要通过FormExtensionAbility来实现,如下示例代码介绍了如何在卡片上显示本地图片和网络图片。

  1. 下载网络图片需要使用到网络能力,需要申请ohos.permission.INTERNET权限,配置方式请参见配置文件权限声明
  2. 在EntryFormAbility中的onAddForm生命周期回调中实现本地文件的刷新。
    1. import formBindingData from '@ohos.app.form.formBindingData';
    2. import formProvider from '@ohos.app.form.formProvider';
    3. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    4. import request from '@ohos.request';
    5. import fs from '@ohos.file.fs';
    6. export default class EntryFormAbility extends FormExtensionAbility {
    7. ...
    8. // 在添加卡片时,打开一个本地图片并将图片内容传递给卡片页面显示
    9. onAddForm(want) {
    10. // 假设在当前卡片应用的tmp目录下有一个本地图片:head.PNG
    11. let tempDir = this.context.getApplicationContext().tempDir;
    12. // 打开本地图片并获取其打开后的fd
    13. let file;
    14. try {
    15. file = fs.openSync(tempDir + '/' + 'head.PNG');
    16. } catch (e) {
    17. console.error(`openSync failed: ${JSON.stringify(e)}`);
    18. }
    19. let formData = {
    20. 'text': 'Image: Bear',
    21. 'imgName': 'imgBear',
    22. 'formImages': {
    23. 'imgBear': file.fd
    24. },
    25. 'loaded': true
    26. }
    27. // 将fd封装在formData中并返回至卡片页面
    28. return formBindingData.createFormBindingData(formData);
    29. }
    30. ...
    31. }
  3. 在EntryFormAbility中的onFormEvent生命周期回调中实现网络文件的刷新。
    1. import formBindingData from '@ohos.app.form.formBindingData';
    2. import formProvider from '@ohos.app.form.formProvider';
    3. import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    4. import request from '@ohos.request';
    5. import fs from '@ohos.file.fs';
    6. export default class EntryFormAbility extends FormExtensionAbility {
    7. // 在卡片页面触发message事件时,下载一个网络图片,并将网络图片内容传递给卡片页面显示
    8. onFormEvent(formId, message) {
    9. let formInfo = formBindingData.createFormBindingData({
    10. 'text': '刷新中...'
    11. })
    12. formProvider.updateForm(formId, formInfo)
    13. // 注意:FormExtensionAbility在触发生命周期回调时被拉起,仅能在后台存在5秒
    14. // 建议下载能快速下载完成的小文件,如在5秒内未下载完成,则此次网络图片无法刷新至卡片页面上
    15. let netFile = 'https://xxxx/xxxx.png'; // 需要在此处使用真实的网络图片下载链接
    16. let tempDir = this.context.getApplicationContext().tempDir;
    17. let tmpFile = tempDir + '/file' + Date.now();
    18. request.downloadFile(this.context, {
    19. url: netFile, filePath: tmpFile
    20. }).then((task) => {
    21. task.on('complete', function callback() {
    22. console.info('ArkTSCard download complete:' + tmpFile);
    23. let file;
    24. try {
    25. file = fs.openSync(tmpFile);
    26. } catch (e) {
    27. console.error(`openSync failed: ${JSON.stringify(e)}`);
    28. }
    29. let formData = {
    30. 'text': 'Image: Https',
    31. 'imgName': 'imgHttps',
    32. 'formImages': {
    33. 'imgHttps': file.fd
    34. },
    35. 'loaded': true
    36. }
    37. let formInfo = formBindingData.createFormBindingData(formData)
    38. formProvider.updateForm(formId, formInfo).then((data) => {
    39. console.info('FormAbility updateForm success.' + JSON.stringify(data));
    40. }).catch((error) => {
    41. console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    42. })
    43. })
    44. task.on('fail', function callBack(err) {
    45. console.info('ArkTSCard download task failed. Cause:' + err);
    46. let formInfo = formBindingData.createFormBindingData({
    47. 'text': '刷新失败'
    48. })
    49. formProvider.updateForm(formId, formInfo)
    50. });
    51. }).catch((err) => {
    52. console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
    53. });
    54. }
    55. ...
    56. };
  4. 在卡片页面通过Image组件展示EntryFormAbility传递过来的卡片内容。
    1. let storage = new LocalStorage();
    2. @Entry(storage)
    3. @Component
    4. struct WidgetCard {
    5. @LocalStorageProp('text') text: string = '加载中...';
    6. @LocalStorageProp('loaded') loaded: boolean = false;
    7. @LocalStorageProp('imgName') imgName: string = 'name';
    8. build() {
    9. Column() {
    10. Text(this.text)
    11. .fontSize('12vp')
    12. .textAlign(TextAlign.Center)
    13. .width('100%')
    14. .height('15%')
    15. Row() {
    16. if (this.loaded) {
    17. Image('memory://' + this.imgName)
    18. .width('50%')
    19. .height('50%')
    20. .margin('5%')
    21. } else {
    22. Image('common/start.PNG')
    23. .width('50%')
    24. .height('50%')
    25. .margin('5%')
    26. }
    27. }.alignItems(VerticalAlign.Center)
    28. .justifyContent(FlexAlign.Center)
    29. Button('刷新')
    30. .height('15%')
    31. .onClick(() => {
    32. postCardAction(this, {
    33. 'action': 'message',
    34. 'params': {
    35. 'info': 'refreshImage'
    36. }
    37. });
    38. })
    39. }
    40. .width('100%').height('100%')
    41. .alignItems(HorizontalAlign.Center)
    42. .padding('5%')
    43. }
    44. }
说明
  • Image组件通过入参(memory://fileName)中的memory://标识来进行远端内存图片显示,其中fileName需要和EntryFormAbility传递对象('formImages': {key: fd})中的key相对应。
  • Image组件通过传入的参数是否有变化来决定是否刷新图片,因此EntryFormAbility每次传递过来的imgName都需要不同,连续传递两个相同的imgName时,图片不会刷新。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号