HarmonyOS 鸿蒙Next服务卡片对于多图该怎么处理？

服务卡片中，对与多图的 formImages 参数该如何处理？文档上只有对单图的处理

可以通过每次传递一张图片，传递多次进行实现

demo参考：

onFormEvent(formId: string, message: string): void {

    let param: Record<string, string> = {

      'text': '刷新中...'

    };

    let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);

    formProvider.updateForm(formId, formInfo);

    // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒

    // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上

    let netFile = 'https://cn-assets.gitee.com/assets/mini_app-e5eee5a21c552b69ae6bf2cf87406b59.jpg'; // 需要在此处使用真实的网络图片下载链接

    let tempDir = this.context.getApplicationContext().tempDir;

    let fileName = 'file' + Date.now();

    let tmpFile = tempDir + '/' + fileName;

    let fileName2 = 'file' + Date.now() + 1;

    let tmpFile2 = tempDir + '/' + fileName2;

    let httpRequest = http.createHttp()

    httpRequest.request(netFile).then((data) => {

      if (data?.responseCode == http.ResponseCode.OK) {

        let imgFile = fileIo.openSync(tmpFile, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);

        fileIo.write(imgFile.fd, data.result as ArrayBuffer).then((writeLen: number) => {

          hilog.info(DOMAIN_NUMBER, TAG, "write data to file succeed and size is:" + writeLen);

        }).catch((err: BusinessError) => {

            hilog.error(DOMAIN_NUMBER, TAG, "write data to file failed with error message: " + err.message + ", error code: " + err.code);

          }).finally(() => {

            fileIo.closeSync(imgFile);

          });

        let imgFile2 = fileIo.openSync(tmpFile2, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);

        fileIo.write(imgFile2.fd, data.result as ArrayBuffer).then((writeLen: number) => {

          hilog.info(DOMAIN_NUMBER, TAG, "write data to file succeed and size is:" + writeLen);

        }).catch((err: BusinessError) => {

          hilog.error(DOMAIN_NUMBER, TAG, "write data to file failed with error message: " + err.message + ", error code: " + err.code);

        }).finally(() => {

          fileIo.closeSync(imgFile2);

        });

        hilog.info(DOMAIN_NUMBER, TAG, 'ArkTSCard download complete: %{public}s', tmpFile);

        let imgMap: Record<string, number> = {};

        let imgMap2: Record<string, number> = {};

        try {

          let file = fileIo.openSync(tmpFile);

          imgMap[fileName] = file.fd;

          let file2 = fileIo.openSync(tmpFile2);

          imgMap2[fileName2] = file2.fd;

        } catch (e) {

          hilog.error(DOMAIN_NUMBER, TAG, `openSync failed: ${JSON.stringify(e as BusinessError)}`);

        }

        class FormDataClass {

          text: string = 'Image: Bear' + fileName;

          //text2: string = 'Image: Bear2' + fileName2;

          loaded: boolean = true;

          // 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。

          imgName: string = fileName;

          //imgName2: string = fileName2;

          // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd

          formImages: Record<string, number> = imgMap;

          //formImages2: Record<string, number> = imgMap2;

        }

        class FormDataClass2 {

          text2: string = 'Image: Bear2' + fileName2;

          loaded: boolean = true;

          // 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。

          imgName2: string = fileName2;

          // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd

          formImages: Record<string, number> = imgMap2;

        }

        let formData = new FormDataClass();

        let formInfo = formBindingData.createFormBindingData(formData);

        formProvider.updateForm(formId, formInfo).then(() => {

          hilog.info(DOMAIN_NUMBER, TAG, '%{public}s', 'FormAbility updateForm success.');

        }).catch((error: BusinessError) => {

          hilog.error(DOMAIN_NUMBER, TAG, `FormAbility updateForm failed: ${JSON.stringify(error)}`);

        });

        let formData2 = new FormDataClass2();

        let formInfo2 = formBindingData.createFormBindingData(formData2);

        formProvider.updateForm(formId, formInfo2).then(() => {

          hilog.info(DOMAIN_NUMBER, TAG, '%{public}s', 'FormAbility updateForm success.');

        }).catch((error: BusinessError) => {

          hilog.error(DOMAIN_NUMBER, TAG, `FormAbility updateForm failed: ${JSON.stringify(error)}`);

        });

      } else {

        hilog.error(DOMAIN_NUMBER, TAG, `ArkTSCard download task failed`);

        let param: Record<string, string> = {

          'text': '刷新失败'

        };

        let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);

        formProvider.updateForm(formId, formInfo);

      }

      httpRequest.destroy();

    })

    //let netFile2 = 'https://cn-assets.gitee.com/assets/mini_app-e5eee5a21c552b69ae6bf2cf87406b59.jpg'; // 需要在此处使用真实的网络图片下载链接

    let netFile3 = 'https://vcg02.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'; // 需要在此处使用真实的网络图片下载链接

    //let tempDir = this.context.getApplicationContext().tempDir;

    let fileName3 = 'file' + Date.now();

    let tmpFile3 = tempDir + '/' + fileName3;

    let httpRequest3 = http.createHttp()

    httpRequest3.request(netFile3).then((data) => {

      if (data?.responseCode == http.ResponseCode.OK) {

        let imgFile3 = fileIo.openSync(tmpFile3, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);

        fileIo.write(imgFile3.fd, data.result as ArrayBuffer).then((writeLen: number) => {

          hilog.info(DOMAIN_NUMBER, TAG, "write data to file succeed and size is:" + writeLen);

        }).catch((err: BusinessError) => {

          hilog.error(DOMAIN_NUMBER, TAG, "write data to file failed with error message: " + err.message + ", error code: " + err.code);

        }).finally(() => {

          fileIo.closeSync(imgFile3);

        });

        hilog.info(DOMAIN_NUMBER, TAG, 'ArkTSCard download complete: %{public}s', tmpFile3);

        let imgMap3: Record<string, number> = {};

        try {

          let file3 = fileIo.openSync(tmpFile3);

          imgMap3[fileName3] = file3.fd;

        } catch (e) {

          hilog.error(DOMAIN_NUMBER, TAG, `openSync failed: ${JSON.stringify(e as BusinessError)}`);

        }

        class FormDataClass {

          text3: string = 'Image: Bear3' + fileName3;

          loaded: boolean = true;

          // 卡片需要显示图片场景, 必须和下列字段formImages 中的key fileName 相同。

          imgName3: string = fileName3;

          // 卡片需要显示图片场景, 必填字段(formImages 不可缺省或改名), fileName 对应 fd

          formImages: Record<string, number> = imgMap3;

        }

        let formData = new FormDataClass();

        let formInfo = formBindingData.createFormBindingData(formData);

        formProvider.updateForm(formId, formInfo).then(() => {

          hilog.info(DOMAIN_NUMBER, TAG, '%{public}s', 'FormAbility updateForm success.');

        }).catch((error: BusinessError) => {

          hilog.error(DOMAIN_NUMBER, TAG, `FormAbility updateForm failed: ${JSON.stringify(error)}`);

        });

      } else {

        hilog.error(DOMAIN_NUMBER, TAG, `ArkTSCard download task failed`);

        let param: Record<string, string> = {

          'text': '刷新失败'

        };

        let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);

        formProvider.updateForm(formId, formInfo);

      }

      httpRequest3.destroy();

    })

page页面


  @LocalStorageProp('text') text: ResourceStr = $r('app.string.loading');

  @LocalStorageProp('text2') text2: ResourceStr = $r('app.string.loading');

  @LocalStorageProp('text3') text3: ResourceStr = $r('app.string.loading');

  @LocalStorageProp('loaded') loaded: boolean = false;

  @LocalStorageProp('imgName') imgName: ResourceStr = $r('app.string.imgName');

  @LocalStorageProp('imgName2') imgName2: ResourceStr = $r('app.string.imgName2');

  @LocalStorageProp('imgName3') imgName3: ResourceStr = $r('app.string.imgName3');

        Image(this.loaded ? 'memory://' + this.imgName : $r('app.media.app_icon'))

          .width(40)

          .height(40)

        Image(this.loaded ? 'memory://' + this.imgName2 : $r('app.media.app_icon'))

          .width(40)

          .height(40)

        Image(this.loaded ? 'memory://' + this.imgName3 : $r('app.media.app_icon'))

          .width(40)

          .height(40)

更多关于HarmonyOS 鸿蒙Next服务卡片对于多图该怎么处理？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼•2 个月前

HarmonyOS 鸿蒙Next服务卡片在处理多图时，系统提供了一系列原生API和布局组件来优化显示效果。

首先，可以利用鸿蒙的ListContainer组件来展示多图。该组件支持动态添加、删除以及更新图片列表，且具备良好的滚动和触控体验。开发者只需将图片资源或图片URL传递给ListContainer，并设置合适的适配器即可。

其次，为了提升视觉效果，鸿蒙提供了丰富的布局选项，如GridLayout、StackLayout等，允许开发者根据需求灵活排列图片。例如，可以使用GridLayout实现图片的网格布局，或使用StackLayout实现图片的堆叠效果。

此外，鸿蒙还支持图片的懒加载和缩略图预览功能，以提高应用性能和用户体验。懒加载可以确保在用户滚动到图片所在位置时才加载图片，避免一次性加载大量图片导致的内存占用和性能下降。缩略图预览则可以在用户未点击图片时先展示一个较小的图片版本，减少资源消耗。

如果开发者需要更复杂的图片处理功能，如图片裁剪、滤镜等，可以调用鸿蒙提供的图像处理API来实现。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html