HarmonyOS 鸿蒙Next PhotoPickerComponent怎么退出预览模式

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next PhotoPickerComponent怎么退出预览模式

PhotoPickerComponent怎么退出预览模式?

3 回复

目前没有直接退出预览的接口,onExitPhotoBrowser是退出大图的回调,相当于退出预览,不知道是否满足要求

import {
  PhotoPickerComponent, PickerController, PickerOptions,
  DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, ItemType, ClickType,  PhotoBrowserRange
} from '@ohos.file.PhotoPickerComponent';
import photoAccessHelper from '@ohos.file.photoAccessHelper';

@Entry
@Component
struct PickerDemo {
  pickerOptions: PickerOptions = new PickerOptions();
  @State pickerController: PickerController = new PickerController();
  @State selectUris: Array<string> = new Array<string>();
  @State currentUri: string = '';
  @State isBrowserShow: boolean = false;

  aboutToAppear() {
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    this.pickerOptions.maxSelectNumber = 5;
    this.pickerOptions.isSearchSupported = false;
    this.pickerOptions.isPhotoTakingSupported = false;
  }

  private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
    if (!itemInfo) {
      return false;
    }
    let type: ItemType | undefined = itemInfo.itemType;
    let uri: string | undefined = itemInfo.uri;
    if (type === ItemType.CAMERA) {
      // 点击相机item
      return true; // 返回true则拉起系统相机,若应用需要自行处理则返回false。
    } else {
      if (clickType === ClickType.SELECTED) {
        // 应用做自己的业务处理
        if (uri) {
          this.selectUris.push(uri);
          this.pickerOptions.preselectedUris = [...this.selectUris];
        }
        return true; // 返回true则勾选,否则则不响应勾选。
      } else {
        if (uri) {
          this.selectUris = this.selectUris.filter((item: string) => {
            return item != uri;
          });
          this.pickerOptions.preselectedUris = [...this.selectUris];
        }
      }
      return true;
    }
  }

  private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    // 进入大图的回调
    this.isBrowserShow = true;
    return true;
  }

  private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    // 退出大图的回调
    this.isBrowserShow = false;
    return true;
  }

  private onPickerControllerReady(): void {
    // 接收到该回调后,便可通过pickerController相关接口向picker发送数据,在此之前不生效。
  }

  private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean {
    // 大图左右滑动的回调
    this.currentUri = browserItemInfo.uri ?? '';
    return true;
  }

  build() {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center
    }) {
      PhotoPickerComponent({
        pickerOptions: this.pickerOptions,
        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(),
        onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo),
        pickerController: this.pickerController,
      }).height('60%').width('100%')
      
      // 这里模拟应用侧底部的选择栏
      if (this.isBrowserShow) {
        Row() {
          ForEach(this.selectUris, (uri: string) => {
            if (uri === this.currentUri) {
              Image(uri).height('10%').width('10%').onClick(() => {
              }).borderWidth(1).borderColor('red')
            } else {
              Image(uri).height('10%').width('10%').onClick(() => {
                this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris);
                this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL);
              })
            }
          }, (uri: string) => JSON.stringify(uri))
        }
      } else {
        Button('预览').width('33%').height('5%').onClick(() => {
          if (this.selectUris.length > 0) {
            this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY);
          }
        })
      }
    }
  }
}

同时点击图片,实现图片预览,点击图片周边蒙层后,退出预览,预览图中可对图片进行放大缩小等基础操作,可以参考这个demo:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-332-V5

setPhotoBrowserItem(uri: string, photoBrowserRange?: PhotoBrowserRange)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

只有进入预览和预览切换图片,没有退出预览的接口吗?

针对HarmonyOS 鸿蒙Next中PhotoPickerComponent退出预览模式的问题,通常这需要在应用内进行相应的操作或设置。以下是一些可能的解决步骤:

  1. 检查API支持:确保你使用的HarmonyOS版本支持PhotoPickerComponent的预览功能,并查看相关API文档,了解如何正确调用退出预览模式的接口。
  2. 应用内设置:在应用内查找是否有退出预览模式的选项或按钮,通常这些设置会位于与图片选择器相关的功能区域。
  3. 代码实现:如果你是开发者,可以通过编程方式控制预览模式的退出。检查你的代码,确保在适当的时候调用了退出预览模式的函数。
  4. 设备兼容性:确认你的设备是否兼容当前的HarmonyOS版本以及PhotoPickerComponent的预览功能。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。他们将能够提供更具体的帮助和指导。

回到顶部