HarmonyOS鸿蒙Next中如何解决PhotoViewPicker已选择图片再次进入未默认选中的问题

HarmonyOS鸿蒙Next中如何解决PhotoViewPicker已选择图片再次进入未默认选中的问题

【问题现象】

通过Media Library Kit的PhotoViewPicker实现选择系统相册图片，之前选择的图片没有默认选中。

预期效果：选择图片完成提交–下次进入标记选中状态（不完成提交下次进入不选中）。

实际效果：选择图片–完成提交–下次进入未标记选中状态。

【背景知识】

Media Library Kit中通过PhotoViewPicker实现选择系统相册图片时，可以使用PhotoSelectOptions属性控制选择的媒体文件类型、数量、预选择文件数据、推荐的媒体文件等。

【解决方案】

PhotoViewPicker选择图片时不会对选择结果进行记录，建议可以自行保存每次选择的图片uri，再通过PhotoSelectOptions属性设置预选的图片数据。

  1. 将每次选择的图片URI缓存到数组preSelected中。

代码示例如下：

photoPicker.select(photoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
   //select方法：在选择图片点击完成之后， PhotoSelectResult.photoUris 返回选中的uri，缓存到preSelected中
   this.preSelected= PhotoSelectResult.photoUris   
})
  1. 通过 PhotoSelectOptions中preselectedUris属性，将缓存的uri设置为预选择的图片。

代码示例如下：

let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
// 将上次选择的图片设置为本次预选图片
photoSelectOptions.preselectedUris = this.preSelected
photoPicker.select(photoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
  ...
})

最终代码示例如下：

// 缓存选择的图片uri
  preSelected:Array<string> = []
  selectImage() {
    try {
      let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      photoSelectOptions.maxSelectNumber = 5;
      // 将上次选择的图片设置为本次预选图片
      photoSelectOptions.preselectedUris = this.preSelected
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select(photoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        //select方法：在选择图片点击完成之后， PhotoSelectResult.photoUris 返回选中的uri，缓存到preSelected中
        this.preSelected = PhotoSelectResult.photoUris
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      }).catch((err: BusinessError) => {
        console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
    }
  }

运行效果：

点击放大

如果preselectedUris中预选择的图片已被删除，select接口不会报异常，也不会影响未删除的图片被默认选中。比如上次选中了图1、图2、图3，从图库中删除图2后，进入图片选择页面，会默认选中图1和图3。

目前PhotoViewPicker不支持将预选择的图片集中显示在列表头部，如果上次选中的图片是分散的，再次进入默认选中的图片仍然是分散的。


更多关于HarmonyOS鸿蒙Next中如何解决PhotoViewPicker已选择图片再次进入未默认选中的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中如何解决PhotoViewPicker已选择图片再次进入未默认选中的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，解决PhotoViewPicker已选择图片再次进入未默认选中的问题

可以通过以下步骤实现：

  1. 保存选中状态：在用户选择图片后，将选中的图片信息（如URI或路径）保存到应用的本地存储或状态管理中。

  2. 恢复选中状态：在再次进入PhotoViewPicker时，从本地存储或状态管理中读取之前保存的选中图片信息，并将其传递给PhotoViewPicker的初始化参数。

  3. 设置默认选中：在PhotoViewPicker的初始化过程中，使用读取到的选中图片信息，通过API设置默认选中的图片。

具体代码示例如下：

// 保存选中图片信息
let selectedImageUri = "content://media/external/images/media/123";
LocalStorage.setItem("selectedImageUri", selectedImageUri);

// 再次进入PhotoViewPicker时恢复选中状态
let savedImageUri = LocalStorage.getItem("selectedImageUri");
if (savedImageUri) {
    let photoViewPicker = new PhotoViewPicker();
    photoViewPicker.setSelectedImageUri(savedImageUri);
}

通过以上步骤，可以确保用户在再次进入PhotoViewPicker时，之前选中的图片能够被默认选中。

回到顶部