openharmony 鸿蒙 ohos-file-PhotoPickerComponent

2025-06-16 浏览 (1)

@ohos.file.PhotoPickerComponent (PhotoPicker组件)

应用可以在布局中嵌入PhotoPicker组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。仅包含读权限。 应用嵌入组件后，用户可直接在PhotoPicker组件中选择图片或视频文件。

说明：

该组件从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import {
  PhotoPickerComponent, PickerController, PickerOptions,
  DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, AnimatorParams,
  MaxSelected, ItemType, ClickType, PickerOrientation,
  SelectMode, PickerColorMode, ReminderMode, MaxCountType, PhotoBrowserRange, PhotoBrowserUIElement,
  ItemsDeletedCallback, ExceedMaxSelectedCallback, CurrentAlbumDeletedCallback
} from '@ohos.file.PhotoPickerComponent';

属性

支持通用属性。

PhotoPickerComponent

PhotoPickerComponent({ pickerOptions?: PickerOptions, onSelect?: (uri: string) => void, onDeselect?: (uri: string) => void, onItemClicked?: (itemInfo: ItemInfo, clickType: ClickType) => boolean, onEnterPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, onExitPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, onPickerControllerReady?: () => void, onPhotoBrowserChanged?: (browserItemInfo: BaseItemInfo) => boolean, onSelectedItemsDeleted?: ItemsDeletedCallback, onExceedMaxSelected?: ExceedMaxSelectedCallback, onCurrentAlbumDeleted?: CurrentAlbumDeletedCallback, pickerController: PickerController })

应用可以在布局中嵌入PhotoPickerComponent组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。

说明： 如果当前PhotoPickerComponent组件嵌套在Tabs组件中使用，Tabs组件的左右滑动会与图片选择大图界面的左右滑动切换手势发生冲突。

可在进退大图的回调中设置Tabs组件是否支持滑动来规避，该问题将在后续版本修复。

装饰器类型：@Component

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

名称类型必填装饰器说明参数描述
pickerOptionsPickerOptions否-picker参数信息。
onSelect(uri: string) => void否-用户在Picker组件中勾选图片时产生的回调事件，将图片uri报给应用。
onDeselect(uri: string) => void否-用户在Picker组件中取消勾选图片时产生的回调事件，同时也会将图片uri报给应用。
onItemClicked(itemInfo: ItemInfo, clickType: ClickType) => boolean否-用户在picker组件中点击item产生的回调事件。
点击图片（缩略图item）时，返回值为true则勾选此图片，否则不响应勾选，uri不授权；点击相机item，返回值为true则拉起系统相机，否则不拉起相机，由应用自行处理。
onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo) => boolean否-点击进入大图时产生的回调事件，将大图相关信息报给应用。
onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo) => boolean否-退出大图时产生的回调事件，将大图相关信息报给应用。
onPickerControllerReady() => void否-当pickerController可用时产生的回调事件。
调用PickerController相关接口需在该回调后才能生效。
onPhotoBrowserChanged(browserItemInfo: BaseItemInfo) => boolean否-大图左右滑动时产生的回调事件，将大图相关信息报给应用。
onSelectedItemsDeleted13+ItemsDeletedCallback否-已勾选的图片被删除时产生的回调，并将被删除图片的相关信息回调给应用。
onExceedMaxSelected13+ExceedMaxSelectedCallback否-选择达到最大选择数量（最大图片选择数量或者是最大视频选择数量亦或是总的最大选择数量）之后再次点击勾选时产生的回调。
- 若选择的数量达到了最大图片选择数量且未达到总的最大选择数量则回调的参数exceedMaxCountType为MaxCountType.PHOTO_MAX_COUNT。
- 若选择的数量达到了最大视频选择数量且未达到总的最大选择数量则回调的参数exceedMaxCountType为MaxCountType.VIDEO_MAX_COUNT。
- 只要选择的数量达到了总的最大选择数量则回调的参数exceedMaxCountType为MaxCountType.TOTAL_MAX_COUNT。
onCurrentAlbumDeleted13+CurrentAlbumDeletedCallback否-当前相册被删除时产生的回调。
当前相册是指通过pickerController.setData(DataType.SET_ALBUM_URI, currentAlbumUri)接口设置给宫格组件的相册，即“currentAlbumUri”。
当前相册被删除后若使用方刷新自己的相册标题栏，使用方可以设置自己的标题栏名称为默认的相册名例如“图片和视频”、“图片”或“视频”，然后通过pickerController.setData(DataType.SET_ALBUM_URI, '')接口传空串去刷新宫格页为默认相册。
onVideoPlayStateChanged14+videoPlayStateChangedCallback否-大图页视频播放状态改变时回调。
pickerControllerPickerController否@ObjectLink应用可通过PickerController向Picker组件发送数据。

PickerOptions

继承自BaseSelectOptions。

Picker配置选项。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
checkBoxColorstring否勾选框的背景色。格式为8位十六进制颜色代码。
backgroundColorstring否picker宫格页面背景色。格式为8位十六进制颜色代码。
isRepeatSelectSupportedboolean否是否支持单张图片重复选择。true表示支持。默认不支持。
checkboxTextColorstring否勾选框内文本颜色。格式为8位十六进制颜色代码。 （该能力暂不支持）
photoBrowserBackgroundColorModePickerColorMode否大图背景颜色。包括跟随系统、浅色模式以及深色模式，默认为跟随系统。
maxSelectedReminderModeReminderMode否选择数量达到最大时的提示方式。包括弹toast提示、不提示以及蒙层提示，默认为弹toast提示。
orientationPickerOrientation否宫格页面滑动预览方向，包括水平和竖直两个方向，默认为竖直方向。
selectModeSelectMode否选择模式。包括多选和单选，默认为多选。
maxPhotoSelectNumbernumber否图片最大的选择数量。最大值为500，受到最大选择总数的限制。默认为500。
maxVideoSelectNumbernumber否视频最大的选择数量。最大值为500，受到最大选择总数的限制。默认为500。
isSlidingSelectionSupported13+boolean否是否支持滑动多选，true表示支持。默认不支持。重复选择场景不支持滑动多选。
photoBrowserCheckboxPosition13+[number, number]否设置大图页checkbox的位置。第一个参数为X方向偏移量，第二个参数为Y方向偏移量。传参范围0-1，代表距离组件左上角0%-100%的偏移量。默认值为[0, 0]。
gridMargin14+Margin否设置组件宫格页margin。
photoBrowserMargin14+Margin否设置组件大图页margin
singleLineConfig20+SingleLineConfig否设置组件宫格页单行显示模式，单行模式下，组件不提供打开大图浏览相关功能。组件不支持大图相关回调，PickerController不支持大图相关的接口，接口调用将无效。

ItemsDeletedCallback13+

type ItemsDeletedCallback = (baseItemInfos: Array<BaseItemInfo>) => void

已勾选的图片被删除时产生的回调事件。

原子化服务API： 从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
baseItemInfosArray<BaseItemInfo>是照片的基本信息。

ExceedMaxSelectedCallback13+

type ExceedMaxSelectedCallback = (exceedMaxCountType: MaxCountType) => void

选择达到最大选择数量之后再次点击勾选时的回调事件。

原子化服务API： 从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
exceedMaxCountTypeMaxCountType是达到最大选择数量的类型。类型包含图片最大选择数量、视频最大选择数量以及总的最大选择数量。

CurrentAlbumDeletedCallback13+

type CurrentAlbumDeletedCallback = () => void

当前相册被删除时的回调事件。

原子化服务API： 从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

videoPlayStateChangedCallback14+

type videoPlayStateChangedCallback = (state: VideoPlayerState) => void

大图页视频播放状态改变时回调。

原子化服务API： 从API version 14开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

PickerController

应用可通过PickerController向picker组件发送数据。

装饰器类型：@Observed

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

setData

setData(dataType: DataType, data: Object): void

应用可通过该接口向picker组件发送数据，并通过DataType来区分具体发送什么类型的数据。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
dataTypeDataType是发送数据的数据类型。
dataObject是发送的数据。

setMaxSelected

setMaxSelected(maxSelected: MaxSelected): void

应用可通过该接口，实时地设置图片的最大选择数量、视频的最大选择数量以及总的最大选择数量。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
maxSelectedMaxSelected是最大选择数量。

setPhotoBrowserItem

setPhotoBrowserItem(uri: string, photoBrowserRange?: PhotoBrowserRange): void

应用可通过该接口,切换picker组件至大图浏览模式浏览图片；当已处于大图浏览模式时，切换浏览的图片。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
uristring是指定大图浏览的图片uri。仅支持指定用户已选择的图片，未选择的图片不生效。
photoBrowserRangePhotoBrowserRange否打开大图浏览模式后，左右滑动切换浏览图片的范围，可配置仅浏览用户选择的或浏览全部图片，视频。默认：PhotoBrowserRange.ALL。浏览全部图片，视频。

exitPhotoBrowser13+

exitPhotoBrowser(): void

应用可通过该接口，向picker发送退出大图的通知。

原子化服务API：从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

setPhotoBrowserUIElementVisibility13+

setPhotoBrowserUIElementVisibility(elements: Array<PhotoBrowserUIElement>, isVisible: boolean): void

应用可通过该接口，设置大图页大图预览组件外其他UI元素是否可见。不设置则默认可见。

原子化服务API：从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
elementsArray<PhotoBrowserUIElement>是大图页大图预览组件外其他UI元素。
isVisibleboolean是是否可见。true表示可见，默认为false。

replacePhotoPickerPreview15+

replacePhotoPickerPreview(originalUri: string, newUri: string, callback: AsyncCallback<void>): void

应用可通过该接口，将photoPicker中用户勾选的图片替换为应用后期编辑修改后的图片。

原子化服务API：从API version 15开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
originalUristring是原uri，将会被替换掉的uri。
newUriboolean是新uri，即替换后的uri。基于originalUri修改后期望在photoPicker上替换originalUri显示的，暂存在应用沙箱的图片/视频uri。
callbackAsyncCallback<void>是调用接口完成替换后的回调。

saveTrustedPhotoAssets15+

saveTrustedPhotoAssets(trustedUris: Array<string>, callback: AsyncCallback<Array<string>>, configs?: Array<photoAccessHelper.PhotoCreationConfig>, saveMode?: SaveMode): void

应用可通过该接口，保存对应uri列表的文件。使用时，一般结合replacePhotoPickerPreview接口使用，将替换显示成功后的应用沙箱图片/视频newUris保存到图库。

原子化服务API：从API version 15开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

参数：

参数名类型必填说明
trustedUrisArray<string>是需要保存到图库的应用沙箱图片/视频uri。trustedUris一般来自replacePhotoPickerPreview替换显示成功的newUri。
callbackAsyncCallback<Array<string>>是返回保存后新生成的媒体库文件对应的uri。
configsArray<photoAccessHelper.PhotoCreationConfig>否需要保存的文件对应的配置参数。
saveModeSaveMode否图片保存模式。

BaseItemInfo

图片、视频相关信息。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
uristring否图片、视频的uri（itemType为ThUMBNAIL时支持，否则为空）。
mimeTypestring否图片、视频的mimeType（itemType为ThUMBNAIL时支持，否则为空）。
widthnumber否图片、视频的宽（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。
heightnumber否图片、视频的高（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。
sizenumber否图片、视频的大小（单位：千字节）（itemType为ThUMBNAIL时支持，否则为空）。
durationnumber否视频的时长（单位：毫秒），图片时返回-1（itemType为ThUMBNAIL时支持，否则为空）。

ItemInfo

继承自BaseItemInfo，增加私有参数itemType。

图片、视频相关信息。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
itemTypeItemType否被点击的item类型。包括缩略图item和相机item。

PhotoBrowserInfo

大图相关信息。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
animatorParamsAnimatorParams否进入、退出大图界面时的动效参数。

AnimatorParams

进退大图动效参数。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
durationnumber否动效时长（单位：毫秒）。
curveCurve | ICurve | string否动效曲线。

MaxSelected

最大选择数量。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
dataMap<MaxCountType, number>否最大选择数量（包含图片的最大选择数量、视频的最大选择数量以及总的最大选择数量）

SingleLineConfig

单行显示模式配置项。单行模式下，组件不提供打开大图浏览相关功能。组件不支持大图相关回调，PickerController不支持大图相关的接口，接口调用将无效。

原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称类型必填说明
itemDisplayRatioItemDisplayRatio否宫格显示宽高比，支持1:1，原图宽高比两种模式，默认为宽高比1:1显示。
itemBorderRadiusLength | BorderRadiuses | LocalizedBorderRadiuses否宫格圆角属性。
itemGapLength否宫格间距。

DataType

枚举，PickerController向picker组件发送数据的数据类型。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
SET_SELECTED_URIS1发送已选择的数据列表，通知picker组件勾选状态刷新，需要传入string数组类型。
例如：应用在自己的页面中删除某张图片后，需要把剩下的已选择的数据列表通过setData接口通知到picker组件，从而触发picker组件勾选框状态刷新正确。
SET_ALBUM_URI2发送已选择相册，通知picker组件刷新相册，需要传入string类型。
例如：应用在自己的页面中选择相册后，需要把已选择的相册uri通过setData接口通知到picker组件，从而触发picker组件刷新新相册数据。

ItemType

被点击item的类型。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
THUMBNAIL0图片、视频item（缩略图item）。
CAMERA1相机item。

ClickType

点击操作的类型。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
SELECTED0选择操作（勾选图片或者点击相机item）。
DESELECTED1取消选择操作（取消勾选图片）。

PickerOrientation

Picker宫格页面滑动预览的方向。（该能力暂不支持）

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
VERTICAL0竖直方向。
HORIZONTAL1水平方向。

SelectMode

选择模式。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
SINGLE_SELECT0单选模式。
MULTI_SELECT1多选模式。

PickerColorMode

Picker的颜色模式。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core。

名称值说明
AUTO0跟随系统。
LIGHT1浅色模式。
DARK2深色模式。

ReminderMode

最大选择数量提示方式。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
NONE0不提示。
TOAST1弹toast提示。
MASK2蒙灰提示。

MaxCountType

最大选择数量的类型。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
TOTAL_MAX_COUNT0总的最大选择数量。
PHOTO_MAX_COUNT1图片的最大选择数量（不能大于总的最大选择数量）。
VIDEO_MAX_COUNT2视频的最大选择数量（不能大于总的最大选择数量）。

PhotoBrowserRange

打开大图浏览模式后，左右滑动切换浏览图片的范围。

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
ALL0全部图片，视频。
SELECTED_ONLY1仅用户已选择的图片，视频。

PhotoBrowserUIElement13+

大图页大图预览组件外其他UI元素。

原子化服务API：从API version 13开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
CHECKBOX0大图页勾选框。
BACK_BUTTON1大图页返回按钮。

SaveMode15+

图片/视频保存模式。

原子化服务API：从API version 15开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
SAVE_AS0另存为新的图片/视频。
OVERWRITE1覆盖原有图片/视频，覆盖后支持在图库中将保存内容回退，还原成原始图片/视频。

VideoPlayerState14+

视频播放状态。

原子化服务API：从API version 14开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
PLAYING0视频播放中。
PAUSED1视频播放暂停。
STOPPED2视频播放停止。
SEEK_START3开始拖拽进度条。
SEEK_FINSH4结束拖拽进度条。

ItemDisplayRatio20+

单行布局宫格显示宽高比模式，包括1:1和原图宽高比两种模式。

原子化服务API：从API version 20开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.FileManagement.PhotoAccessHelper.Core

名称值说明
SQUARE_RATIO01:1比例显示。
ORIGINAL_SIZE_RATIO1原图宽高比显示。

示例

// xxx.ets
import {
  PhotoPickerComponent,
  PickerController,
  PickerOptions,
  DataType,
  BaseItemInfo,
  ItemInfo,
  PhotoBrowserInfo,
  AnimatorParams,
  MaxSelected,
  ItemType,
  ClickType,
  PickerOrientation,
  SelectMode,
  PickerColorMode,
  ReminderMode,
  MaxCountType,
  PhotoBrowserRange,
  PhotoBrowserUIElement,
  ItemsDeletedCallback,
  ExceedMaxSelectedCallback,
  CurrentAlbumDeletedCallback,
  videoPlayStateChangedCallback,
  VideoPlayerState
} 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;
  private selectedItemsDeletedCallback: ItemsDeletedCallback =
    (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(baseItemInfos);
  private exceedMaxSelectedCallback: ExceedMaxSelectedCallback =
    (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(exceedMaxCountType);
  private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted();
  private videoPlayStateChangedCallback: videoPlayStateChangedCallback =
    (state: VideoPlayerState) => this.videoPlayStateChanged(state);

  aboutToAppear() {
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    this.pickerOptions.maxSelectNumber = 5;
    this.pickerOptions.isSearchSupported = false;
    this.pickerOptions.isPhotoTakingSupported = false;
    this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5];
    // 其他属性.....
  }

  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;
    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发送数据，在此之前不生效。
    let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON];
    this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // 设置大图页不显示返回按钮。
  }

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

  private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void {
    // 已勾选图片被删除时的回调。
  }

  private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void {
    // 超过最大选择数量再次点击时的回调。
  }

  private onCurrentAlbumDeleted(): void {
    // 当前相册被删除时的回调。
  }

  private videoPlayStateChanged(state: VideoPlayerState): void {
    // 当视频播放状态变化时回调。
  }
  build() {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center
    }) {
      Column() {
        if (this.isBrowserShow) {
          // 这里模拟应用自己的大图返回按钮。
          Row() {
            Button("退出大图").width('33%').height('8%').onClick(() => {
              this.pickerController.exitPhotoBrowser();
            })
          }.margin({ bottom: 20 })
        }

        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(),
          onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo),
          onSelectedItemsDeleted: this.selectedItemsDeletedCallback,
          onExceedMaxSelected: this.exceedMaxSelectedCallback,
          onCurrentAlbumDeleted: this.currentAlbumDeletedCallback,
          onVideoPlayStateChanged: this.videoPlayStateChangedCallback,
          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);
            }
          })
        }
      }
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Media Library Kit（媒体文件管理服务）

harmony 鸿蒙media_access_helper_capi.h

harmony 鸿蒙media_asset_base_capi.h

harmony 鸿蒙media_asset_capi.h

harmony 鸿蒙media_asset_change_request_capi.h

harmony 鸿蒙media_asset_manager_capi.h

harmony 鸿蒙MediaAssetManager

harmony 鸿蒙MediaLibrary_RequestId

harmony 鸿蒙MediaLibrary_RequestOptions

harmony 鸿蒙moving_photo_capi.h

  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 本文链接 https://seaxiang.com/blog/1LHG0b