HarmonyOS 鸿蒙Next PhotoPickerComponent (Photo Picker组件)查看大图问题咨询

可以通过设置选择模式SelectMode为单选模式，并设置isPreviewForSingleSelectionSupported 为true，单选模式下是否需要进大图预览，true表示需要，false表示不需要，默认为true。达到点击缩略图后进入大图模式，并隐藏组件自带的放大按钮

import {
  photoAccessHelper,
  PhotoPickerComponent,
  PickerController,
  PickerOptions,
  DataType,
  ItemInfo,
  PhotoBrowserInfo,
  ItemType,
  ClickType,
} from '@kit.MediaLibraryKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Test240820153033101 {
  pickerOptions: PickerOptions = new PickerOptions();
  [@State](/user/State) pickerController: PickerController = new PickerController();
  [@State](/user/State) selectUris: Array<string> = new Array<string>();
  aboutToAppear() {
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    this.pickerOptions.maxSelectNumber = 10;
    this.pickerOptions.isSearchSupported = false;
    this.pickerOptions.isPhotoTakingSupported = false;
    this.pickerOptions.isPreviewForSingleSelectionSupported = true
    this.pickerOptions.selectMode = 0
    // 其他属性.....
  }
  private onSelect(uri: string): void {
    // 添加
    if (uri) {
      this.selectUris.push(uri);
    }
  }
  private onDeselect(uri: string): void {
    // 移除
    if (uri) {
      this.selectUris = this.selectUris.filter((item: string) => {
        return item != uri;
      })
    }
  }
  private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
    if (!itemInfo) {
      return false;
    }
    let type: ItemType | undefined = itemInfo.itemType;
    if (type === ItemType.CAMERA) {
      // 点击相机item
      return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false。
    } else {
      if (clickType === ClickType.SELECTED) {
        // 应用做自己的业务处理
        return true; // 返回true则勾选，否则则不响应勾选。
      }
    }
    return true;
  }
  private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    // 进入大图的回调
    return true;
  }
  private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    // 退出大图的回调
    return true;
  }
  private onPickerControllerReady(): void {
    // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。
  }
  build() {
    Stack() {
      PhotoPickerComponent({
        pickerOptions: this.pickerOptions,
        // onSelect: (uri: string): void => this.onSelect(uri),
        // onDeselect: (uri: string): void => this.onDeselect(uri),
        onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo,
          clickType), // 该接口可替代上面两个接口
        onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
        onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
        onPickerControllerReady: (): void => this.onPickerControllerReady(),
        pickerController: this.pickerController,
      }).height('100%').width('100%')
      // 这里模拟应用侧底部的选择栏
      Row() {
        ForEach(this.selectUris, (uri: string) => {
          Image(uri).height('10%').width('10%').onClick(() => {
            // 点击事件模拟删除操作，通过pickerController向picker组件发送已选择的数据列表，触发picker组件勾选框刷新
            this.selectUris = this.selectUris.filter((item: string) => {
              return item != uri;
            })
            this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris);
          })
        }, (uri: string) => JSON.stringify(uri))
      }
    }
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>