1# @ohos.file.PhotoPickerComponent (PhotoPicker组件) 2 3应用可以在布局中嵌入PhotoPicker组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。仅包含读权限。 4应用嵌入组件后，用户可直接在PhotoPicker组件中选择图片或视频文件。 5 6> **说明：** 7> 8> 该组件从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 导入模块 11 12```ts 13import { 14 PhotoPickerComponent, PickerController, PickerOptions, 15 DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, AnimatorParams, 16 MaxSelected, ItemType, ClickType, PickerOrientation, 17 SelectMode, PickerColorMode, ReminderMode, MaxCountType, PhotoBrowserRange, PhotoBrowserUIElement, 18 ItemsDeletedCallback, ExceedMaxSelectedCallback, CurrentAlbumDeletedCallback 19} from '@ohos.file.PhotoPickerComponent'; 20``` 21 22## 属性 23 24支持[通用属性](../apis-arkui/arkui-ts/ts-component-general-attributes.md)。 25 26## PhotoPickerComponent 27 28PhotoPickerComponent({ 29 pickerOptions?: PickerOptions, 30 onSelect?: (uri: string) => void, 31 onDeselect?: (uri: string) => void, 32 onItemClicked?: (itemInfo: ItemInfo, clickType: ClickType) => boolean, 33 onEnterPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, 34 onExitPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, 35 onPickerControllerReady?: () => void, 36 onPhotoBrowserChanged?: (browserItemInfo: BaseItemInfo) => boolean, 37 onSelectedItemsDeleted?: ItemsDeletedCallback, 38 onExceedMaxSelected?: ExceedMaxSelectedCallback, 39 onCurrentAlbumDeleted?: CurrentAlbumDeletedCallback, 40 pickerController: PickerController 41}) 42 43应用可以在布局中嵌入PhotoPickerComponent组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。 44 45> **说明：** 46> 如果当前PhotoPickerComponent组件嵌套在Tabs组件中使用，Tabs组件的左右滑动会与图片选择大图界面的左右滑动切换手势发生冲突。 47> 48> 可在进退大图的回调中设置Tabs组件是否支持滑动来规避，该问题将在后续版本修复。 49 50**装饰器类型**：@Component 51 52**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 53 54**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 55 56**参数：** 57 58| 名称 | 类型 | 必填 | 装饰器说明 | 参数描述 | 59|-------------------------|----------------------------------------------------------------------------------|-----|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 60| pickerOptions | [PickerOptions](#pickeroptions) | 否 | - | picker参数信息。 | 61| onSelect | (uri: string) => void | 否 | - | 用户在Picker组件中勾选图片时产生的回调事件，将图片uri报给应用。 | 62| onDeselect | (uri: string) => void | 否 | - | 用户在Picker组件中取消勾选图片时产生的回调事件，同时也会将图片uri报给应用。 | 63| onItemClicked | (itemInfo: [ItemInfo](#iteminfo), clickType: [ClickType](#clicktype)) => boolean | 否 | - | 用户在picker组件中点击item产生的回调事件。<br>点击图片（缩略图item）时，返回值为true则勾选此图片，否则不响应勾选，uri不授权；点击相机item，返回值为true则拉起系统相机，否则不拉起相机，由应用自行处理。 | 64| onEnterPhotoBrowser | (photoBrowserInfo: [PhotoBrowserInfo](#photobrowserinfo)) => boolean | 否 | - | 点击进入大图时产生的回调事件，将大图相关信息报给应用。 | 65| onExitPhotoBrowser | (photoBrowserInfo: [PhotoBrowserInfo](#photobrowserinfo)) => boolean | 否 | - | 退出大图时产生的回调事件，将大图相关信息报给应用。 | 66| onPickerControllerReady | () => void | 否 | - | 当pickerController可用时产生的回调事件。<br>调用PickerController相关接口需在该回调后才能生效。 | 67| onPhotoBrowserChanged | (browserItemInfo: [BaseItemInfo](#baseiteminfo)) => boolean | 否 | - | 大图左右滑动时产生的回调事件，将大图相关信息报给应用。 | 68| onSelectedItemsDeleted<sup>13+</sup> | [ItemsDeletedCallback](#itemsdeletedcallback13) | 否 | - | 已勾选的图片被删除时产生的回调，并将被删除图片的相关信息回调给应用。 | 69| onExceedMaxSelected<sup>13+</sup> | [ExceedMaxSelectedCallback](#exceedmaxselectedcallback13) | 否 | - | 选择达到最大选择数量（最大图片选择数量或者是最大视频选择数量亦或是总的最大选择数量）之后再次点击勾选时产生的回调。<br>- 若选择的数量达到了最大图片选择数量且未达到总的最大选择数量则回调的参数exceedMaxCountType为[MaxCountType](#maxcounttype).PHOTO_MAX_COUNT。<br>- 若选择的数量达到了最大视频选择数量且未达到总的最大选择数量则回调的参数exceedMaxCountType为[MaxCountType](#maxcounttype).VIDEO_MAX_COUNT。<br>- 只要选择的数量达到了总的最大选择数量则回调的参数exceedMaxCountType为[MaxCountType](#maxcounttype).TOTAL_MAX_COUNT。 | 70| onCurrentAlbumDeleted<sup>13+</sup> | [CurrentAlbumDeletedCallback](#currentalbumdeletedcallback13) | 否 | - | 当前相册被删除时产生的回调。<br>当前相册是指通过pickerController.[setData](#setdata)([DataType](#datatype).SET_ALBUM_URI, currentAlbumUri)接口设置给宫格组件的相册，即“currentAlbumUri”。<br>当前相册被删除后若使用方刷新自己的相册标题栏，使用方可以设置自己的标题栏名称为默认的相册名例如“图片和视频”、“图片”或“视频”，然后通过pickerController.[setData](#setdata)([DataType](#datatype).SET_ALBUM_URI, '')接口传空串去刷新宫格页为默认相册。 | 71| onVideoPlayStateChanged<sup>14+</sup> | [videoPlayStateChangedCallback](#videoplaystatechangedcallback14) | 否 | - | 大图页视频播放状态改变时回调。 | 72| pickerController | [PickerController](#pickercontroller) | 否 | @ObjectLink | 应用可通过PickerController向Picker组件发送数据。 | 73 74## PickerOptions 75 76继承自[BaseSelectOptions](js-apis-photoAccessHelper.md#baseselectoptions12)。 77 78Picker配置选项。 79 80**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 81 82**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 83 84| 名称 | 类型 | 必填 | 说明 | 85|---------------------------------|-----------------------------------------|-----|--------------------------------------------------------------------------| 86| checkBoxColor | string | 否 | 勾选框的背景色。格式为8位十六进制颜色代码。 | 87| backgroundColor | string | 否 | picker宫格页面背景色。格式为8位十六进制颜色代码。 | 88| isRepeatSelectSupported | boolean | 否 | 是否支持单张图片重复选择。true表示支持。默认不支持。 | 89| checkboxTextColor | string | 否 | 勾选框内文本颜色。格式为8位十六进制颜色代码。 （该能力暂不支持） | 90| photoBrowserBackgroundColorMode | [PickerColorMode](#pickercolormode) | 否 | 大图背景颜色。包括跟随系统、浅色模式以及深色模式，默认为跟随系统。 | 91| maxSelectedReminderMode | [ReminderMode](#remindermode) | 否 | 选择数量达到最大时的提示方式。包括弹toast提示、不提示以及蒙层提示，默认为弹toast提示。 | 92| orientation | [PickerOrientation](#pickerorientation) | 否 | 宫格页面滑动预览方向，包括水平和竖直两个方向，默认为竖直方向。（该能力暂不支持） | 93| selectMode | [SelectMode](#selectmode) | 否 | 选择模式。包括多选和单选，默认为多选。 | 94| maxPhotoSelectNumber | number | 否 | 图片最大的选择数量。最大值为500，受到最大选择总数的限制。默认为500。 | 95| maxVideoSelectNumber | number | 否 | 视频最大的选择数量。最大值为500，受到最大选择总数的限制。默认为500。 | 96| isSlidingSelectionSupported<sup>13+</sup> | boolean | 否 | 是否支持滑动多选，true为支持，false为不支持，默认不支持。重复选择场景不支持滑动多选。 | 97| photoBrowserCheckboxPosition<sup>13+</sup> | [number, number] | 否 | 设置大图页checkbox的位置。第一个参数为X方向偏移量，第二个参数为Y方向偏移量。传参范围0-1，代表距离组件左上角0%-100%的偏移量。默认值为[0, 0]。 | 98| gridMargin<sup>14+</sup> | [Margin](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin) | 否 | 设置组件宫格页margin。 | 99| photoBrowserMargin<sup>14+</sup> | [Margin](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin) | 否 | 设置组件大图页margin | 100 101## ItemsDeletedCallback<sup>13+</sup> 102 103type ItemsDeletedCallback = (baseItemInfos: Array<BaseItemInfo>) => void 104 105已勾选的图片被删除时产生的回调事件。 106 107**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 108 109**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| -------- |--------------------------------------------| -------- |----------| 115| baseItemInfos | Array<[BaseItemInfo](#baseiteminfo)> | 是 | 照片的基本信息。 | 116 117## ExceedMaxSelectedCallback<sup>13+</sup> 118 119type ExceedMaxSelectedCallback = (exceedMaxCountType: MaxCountType) => void 120 121选择达到最大选择数量之后再次点击勾选时的回调事件。 122 123**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 124 125**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| -------- |-------------------------------| -------- |----------------------------------------------| 131| exceedMaxCountType | [MaxCountType](#maxcounttype) | 是 | 达到最大选择数量的类型。类型包含图片最大选择数量、视频最大选择数量以及总的最大选择数量。 | 132 133## CurrentAlbumDeletedCallback<sup>13+</sup> 134 135type CurrentAlbumDeletedCallback = () => void 136 137当前相册被删除时的回调事件。 138 139**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 140 141**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 142 143## videoPlayStateChangedCallback<sup>14+</sup> 144 145type videoPlayStateChangedCallback = (state: VideoPlayerState) => void 146 147大图页视频播放状态改变时回调。 148 149**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 150 151**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 152 153## PickerController 154 155应用可通过PickerController向picker组件发送数据。 156 157**装饰器类型**：@Observed 158 159**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 160 161**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 162 163### setData 164 165setData(dataType: DataType, data: Object): void 166 167应用可通过该接口向picker组件发送数据，并通过DataType来区分具体发送什么类型的数据。 168 169**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 170 171**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176| ------------------------- | ------------------ | ----- | --------------- | 177| dataType | [DataType](#datatype) | 是 | 发送数据的数据类型。| 178| data | Object | 是 | 发送的数据。 | 179 180### setMaxSelected 181 182setMaxSelected(maxSelected: MaxSelected): void 183 184应用可通过该接口，实时地设置图片的最大选择数量、视频的最大选择数量以及总的最大选择数量。 185 186**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 187 188**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 189 190**参数：** 191 192| 参数名 | 类型 | 必填 | 说明 | 193| ------------------------- | ------------------ | ----- | --------------- | 194| maxSelected | [MaxSelected](#maxselected) | 是 | 最大选择数量。| 195 196### setPhotoBrowserItem 197 198setPhotoBrowserItem(uri: string, photoBrowserRange?: PhotoBrowserRange): void 199 200应用可通过该接口,切换picker组件至大图浏览模式浏览图片；当已处于大图浏览模式时，切换浏览的图片。 201 202**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 203 204**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 205 206**参数：** 207 208| 参数名 | 类型 | 必填 | 说明 | 209| ------------------------- | ------------------ | ----- | --------------- | 210| uri | string | 是 | 指定大图浏览的图片uri。仅支持指定用户已选择的图片，未选择的图片不生效。| 211| photoBrowserRange | [PhotoBrowserRange](#photobrowserrange) | 否 | 打开大图浏览模式后，左右滑动切换浏览图片的范围，可配置仅浏览用户选择的或浏览全部图片，视频。默认：PhotoBrowserRange.ALL。浏览全部图片，视频。 | 212 213### exitPhotoBrowser<sup>13+</sup> 214 215exitPhotoBrowser(): void 216 217应用可通过该接口，向picker发送退出大图的通知。 218 219**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 220 221**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 222 223### setPhotoBrowserUIElementVisibility<sup>13+</sup> 224 225setPhotoBrowserUIElementVisibility(elements: Array<PhotoBrowserUIElement>, isVisible: boolean): void 226 227应用可通过该接口，设置大图页大图预览组件外其他UI元素是否可见。不设置则默认可见。 228 229**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 230 231**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 232 233**参数：** 234 235| 参数名 | 类型 | 必填 | 说明 | 236|-------------|----------------------------------------------------------------| ----- |-------------------| 237| elements | Array<[PhotoBrowserUIElement](#photobrowseruielement13)> | 是 | 大图页大图预览组件外其他UI元素。 | 238| isVisible | boolean | 是 | 是否可见。true表示可见，默认为false。 | 239 240### replacePhotoPickerPreview<sup>15+</sup> 241 242replacePhotoPickerPreview(originalUri: string, newUri: string, callback: AsyncCallback<void>): void 243 244应用可通过该接口，将photoPicker中用户勾选的图片替换为应用后期编辑修改后的图片。 245 246**原子化服务API**：从API version 15开始，该接口支持在原子化服务中使用。 247 248**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 249 250**参数：** 251 252| 参数名 | 类型 | 必填 | 说明 | 253|-------------|----------------------------| -------------- |-------------------| 254| originalUri | string | 是 | 原uri，将会被替换掉的uri。 | 255| newUri | boolean | 是 | 新uri，即替换后的uri。基于originalUri修改后期望在photoPicker上替换originalUri显示的，暂存在应用沙箱的图片/视频uri。 | 256| callback | AsyncCallback<void> | 是 | 调用接口完成替换后的回调。 | 257 258### saveTrustedPhotoAssets<sup>15+</sup> 259 260saveTrustedPhotoAssets(trustedUris: Array<string>, callback: AsyncCallback<Array<string>>, configs?: Array<photoAccessHelper.PhotoCreationConfig>, saveMode?: SaveMode): void 261 262应用可通过该接口，保存对应uri列表的文件。使用时，一般结合[replacePhotoPickerPreview](#replacephotopickerpreview15)接口使用，将替换显示成功后的应用沙箱图片/视频newUris保存到图库。 263 264**原子化服务API**：从API version 15开始，该接口支持在原子化服务中使用。 265 266**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 267 268**参数：** 269 270| 参数名 | 类型 | 必填 | 说明 | 271|-------------|----------------------------------------------------------------| ----- |-------------------| 272| trustedUris | Array<string> | 是 | 需要保存到图库的应用沙箱图片/视频uri。trustedUris一般来自[replacePhotoPickerPreview](#replacephotopickerpreview15)替换显示成功的newUri。 | 273| callback | AsyncCallback<Array<string>> | 是 | 返回保存后新生成的媒体库文件对应的uri。 | 274| configs | Array<[photoAccessHelper.PhotoCreationConfig](js-apis-photoAccessHelper.md#photocreationconfig12)> | 否 | 需要保存的文件对应的配置参数。 | 275| saveMode | [SaveMode](#savemode15) | 否 | 图片保存模式。 | 276 277## BaseItemInfo 278 279图片、视频相关信息。 280 281**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 282 283**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 284 285| 名称 | 类型 | 必填 | 说明 | 286|----------|--------|-----|---------------------------------------------------| 287| uri | string | 否 | 图片、视频的uri（itemType为ThUMBNAIL时支持，否则为空）。 | 288| mimeType | string | 否 | 图片、视频的mimeType（itemType为ThUMBNAIL时支持，否则为空）。 | 289| width | number | 否 | 图片、视频的宽（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 290| height | number | 否 | 图片、视频的高（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 291| size | number | 否 | 图片、视频的大小（单位：千字节）（itemType为ThUMBNAIL时支持，否则为空）。 | 292| duration | number | 否 | 视频的时长（单位：毫秒），图片时返回-1（itemType为ThUMBNAIL时支持，否则为空）。 | 293 294## ItemInfo 295 296继承自[BaseItemInfo]，仅含私有参数itemType 297 298图片、视频相关信息。 299 300**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 301 302**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 303 304| 名称 | 类型 | 必填 | 说明 | 305|----------|--------|-----|---------------------------------------------------| 306| itemType | [ItemType](#itemtype) | 否 | 被点击的item类型。包括缩略图item和相机item。 | 307 308## PhotoBrowserInfo 309 310大图相关信息。 311 312**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 313 314**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 315 316| 名称 | 类型 | 必填 | 说明 | 317|----------|--------|-----|---------| 318| animatorParams | [AnimatorParams](#animatorparams) | 否 | 进入、退出大图界面时的动效参数。 | 319 320## AnimatorParams 321 322进退大图动效参数。 323 324**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 325 326**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 327 328| 名称 | 类型 | 必填 | 说明 | 329|----------|--------|-----|--------------| 330| duration | number | 否 | 动效时长（单位：毫秒）。 | 331| curve | [Curve](../apis-arkui/js-apis-curve.md#curve) | [ICurve](../apis-arkui/js-apis-curve.md#icurve9) | string | 否 | 动效曲线。 | 332 333## MaxSelected 334 335最大选择数量。 336 337**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 340 341| 名称 | 类型 | 必填 | 说明 | 342|----------|--------|-----|---------| 343| data | Map<[MaxCountType](#maxcounttype), number> | 否 | 最大选择数量（包含图片的最大选择数量、视频的最大选择数量以及总的最大选择数量） | 344 345## DataType 346 347枚举，PickerController向picker组件发送数据的数据类型。 348 349**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 350 351**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 352 353| 名称 | 值 | 说明 | 354|-------------------|-----|--------------------------------------------------------------------------------------------------------------------| 355| SET_SELECTED_URIS | 1 | 发送已选择的数据列表，通知picker组件勾选状态刷新，需要传入string数组类型。<br>例如：应用在自己的页面中删除某张图片后，需要把剩下的已选择的数据列表通过setData接口通知到picker组件，从而触发picker组件勾选框状态刷新正确。 | 356| SET_ALBUM_URI | 2 | 发送已选择相册，通知picker组件刷新相册，需要传入string类型。<br>例如：应用在自己的页面中选择相册后，需要把已选择的相册uri通过setData接口通知到picker组件，从而触发picker组件刷新新相册数据。 | 357 358## ItemType 359 360被点击item的类型。 361 362**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 363 364**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 365 366| 名称 | 值 | 说明 | 367|-------------------|-----|------------| 368| THUMBNAIL | 0 | 图片、视频item（缩略图item）。 | 369| CAMERA | 1 | 相机item。 | 370 371## ClickType 372 373点击操作的类型。 374 375**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 376 377**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 378 379| 名称 | 值 | 说明 | 380|-------------------|-----|------------------------| 381| SELECTED | 0 | 选择操作（勾选图片或者点击相机item）。 | 382| DESELECTED | 1 | 取消选择操作（取消勾选图片）。 | 383 384## PickerOrientation 385 386Picker宫格页面滑动预览的方向。（该能力暂不支持） 387 388**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 389 390**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 391 392| 名称 | 值 | 说明 | 393|-------------------|-----|-------| 394| VERTICAL | 0 | 竖直方向。 | 395| HORIZONTAL | 1 | 水平方向。 | 396 397## SelectMode 398 399选择模式。 400 401**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 402 403**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 404 405| 名称 | 值 | 说明 | 406|-------------------|-----|-------| 407| SINGLE_SELECT | 0 | 单选模式。 | 408| MULTI_SELECT | 1 | 多选模式。 | 409 410## PickerColorMode 411 412Picker的颜色模式。 413 414**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 415 416**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core。 417 418| 名称 | 值 | 说明 | 419|-------------------|-----|-------| 420| AUTO | 0 | 跟随系统。 | 421| LIGHT | 1 | 浅色模式。 | 422| DARK | 2 | 深色模式。 | 423 424## ReminderMode 425 426最大选择数量提示方式。 427 428**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 429 430**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 431 432| 名称 | 值 | 说明 | 433|-------------------|-----|-----------| 434| NONE | 0 | 不提示。 | 435| TOAST | 1 | 弹toast提示。 | 436| MASK | 2 | 蒙灰提示。 | 437 438## MaxCountType 439 440最大选择数量的类型。 441 442**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 443 444**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 445 446| 名称 | 值 | 说明 | 447|-------------------|-----|---------------------------| 448| TOTAL_MAX_COUNT | 0 | 总的最大选择数量。 | 449| PHOTO_MAX_COUNT | 1 | 图片的最大选择数量（不能大于总的最大选择数量）。 | 450| VIDEO_MAX_COUNT | 2 | 视频的最大选择数量（不能大于总的最大选择数量）。 | 451 452## PhotoBrowserRange 453 454打开大图浏览模式后，左右滑动切换浏览图片的范围。 455 456**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 457 458**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 459 460| 名称 | 值 | 说明 | 461|-------------------|-----|---------------------------| 462| ALL | 0 | 全部图片，视频。 | 463| SELECTED_ONLY | 1 | 仅用户已选择的图片，视频。 | 464 465## PhotoBrowserUIElement<sup>13+</sup> 466 467大图页大图预览组件外其他UI元素。 468 469**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 470 471**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 472 473| 名称 | 值 | 说明 | 474|-------------|-----|----------| 475| CHECKBOX | 0 | 大图页勾选框。 | 476| BACK_BUTTON | 1 | 大图页返回按钮。 | 477 478## SaveMode<sup>15+</sup> 479 480图片/视频保存模式。 481 482**原子化服务API**：从API version 15开始，该接口支持在原子化服务中使用。 483 484**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 485 486| 名称 | 值 | 说明 | 487|-------------|-----|----------| 488| SAVE_AS | 0 | 另存为新的图片/视频。 | 489| OVERWRITE | 1 | 覆盖原有图片/视频，覆盖后支持在图库中将保存内容回退，还原成原始图片/视频。 | 490 491## VideoPlayerState<sup>14+</sup> 492 493视频播放状态。 494 495**原子化服务API**：从API version 14开始，该接口支持在原子化服务中使用。 496 497**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 498 499| 名称 | 值 | 说明 | 500|-------------------|-----|---------------------------| 501| PLAYING | 0 | 视频播放中。 | 502| PAUSED | 1 | 视频播放暂停。 | 503| STOPPED | 2 | 视频播放停止。 | 504| SEEK_START | 3 | 开始拖拽进度条。 | 505| SEEK_FINSH | 4 | 结束拖拽进度条。 | 506 507## 示例 508 509```ts 510// xxx.ets 511import { 512 PhotoPickerComponent, 513 PickerController, 514 PickerOptions, 515 DataType, 516 BaseItemInfo, 517 ItemInfo, 518 PhotoBrowserInfo, 519 AnimatorParams, 520 MaxSelected, 521 ItemType, 522 ClickType, 523 PickerOrientation, 524 SelectMode, 525 PickerColorMode, 526 ReminderMode, 527 MaxCountType, 528 PhotoBrowserRange, 529 PhotoBrowserUIElement, 530 ItemsDeletedCallback, 531 ExceedMaxSelectedCallback, 532 CurrentAlbumDeletedCallback, 533 videoPlayStateChangedCallback, 534 VideoPlayerState 535} from '@ohos.file.PhotoPickerComponent'; 536import photoAccessHelper from '@ohos.file.photoAccessHelper'; 537 538@Entry 539@Component 540struct PickerDemo { 541 pickerOptions: PickerOptions = new PickerOptions(); 542 @State pickerController: PickerController = new PickerController(); 543 @State selectUris: Array<string> = new Array<string>(); 544 @State currentUri: string = ''; 545 @State isBrowserShow: boolean = false; 546 private selectedItemsDeletedCallback: ItemsDeletedCallback = 547 (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(baseItemInfos); 548 private exceedMaxSelectedCallback: ExceedMaxSelectedCallback = 549 (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(exceedMaxCountType); 550 private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted(); 551 private videoPlayStateChangedCallback: videoPlayStateChangedCallback = 552 (state: VideoPlayerState) => this.videoPlayStateChanged(state); 553 554 aboutToAppear() { 555 this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 556 this.pickerOptions.maxSelectNumber = 5; 557 this.pickerOptions.isSearchSupported = false; 558 this.pickerOptions.isPhotoTakingSupported = false; 559 this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5]; 560 // 其他属性..... 561 } 562 563 private onSelect(uri: string): void { 564 // 添加。 565 if (uri) { 566 this.selectUris.push(uri); 567 } 568 } 569 570 private onDeselect(uri: string): void { 571 // 移除。 572 if (uri) { 573 this.selectUris = this.selectUris.filter((item: string) => { 574 return item != uri; 575 }) 576 } 577 } 578 579 private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean { 580 if (!itemInfo) { 581 return false; 582 } 583 let type: ItemType | undefined = itemInfo.itemType; 584 let uri: string | undefined = itemInfo.uri; 585 if (type === ItemType.CAMERA) { 586 // 点击相机item。 587 return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false。 588 } else { 589 if (clickType === ClickType.SELECTED) { 590 // 应用做自己的业务处理。 591 if (uri) { 592 this.selectUris.push(uri); 593 this.pickerOptions.preselectedUris = [...this.selectUris]; 594 } 595 return true; // 返回true则勾选，否则则不响应勾选。 596 } else { 597 if (uri) { 598 this.selectUris = this.selectUris.filter((item: string) => { 599 return item != uri; 600 }); 601 this.pickerOptions.preselectedUris = [...this.selectUris]; 602 } 603 } 604 return true; 605 } 606 } 607 608 private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 609 // 进入大图的回调。 610 this.isBrowserShow = true; 611 return true; 612 } 613 614 private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 615 // 退出大图的回调。 616 this.isBrowserShow = false; 617 return true; 618 } 619 620 private onPickerControllerReady(): void { 621 // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。 622 let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON]; 623 this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // 设置大图页不显示返回按钮。 624 } 625 626 private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean { 627 // 大图左右滑动的回调。 628 this.currentUri = browserItemInfo.uri ?? ''; 629 return true; 630 } 631 632 private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void { 633 // 已勾选图片被删除时的回调。 634 } 635 636 private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void { 637 // 超过最大选择数量再次点击时的回调。 638 } 639 640 private onCurrentAlbumDeleted(): void { 641 // 当前相册被删除时的回调。 642 } 643 644 private videoPlayStateChanged(state: VideoPlayerState): void { 645 // 当视频播放状态变化时回调。 646 } 647 build() { 648 Flex({ 649 direction: FlexDirection.Column, 650 justifyContent: FlexAlign.Center, 651 alignItems: ItemAlign.Center 652 }) { 653 Column() { 654 if (this.isBrowserShow) { 655 // 这里模拟应用自己的大图返回按钮。 656 Row() { 657 Button("退出大图").width('33%').height('8%').onClick(() => { 658 this.pickerController.exitPhotoBrowser(); 659 }) 660 }.margin({ bottom: 20 }) 661 } 662 663 PhotoPickerComponent({ 664 pickerOptions: this.pickerOptions, 665 // onSelect: (uri: string): void => this.onSelect(uri), 666 // onDeselect: (uri: string): void => this.onDeselect(uri), 667 onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, 668 clickType), // 该接口可替代上面两个接口。 669 onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo), 670 onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo), 671 onPickerControllerReady: (): void => this.onPickerControllerReady(), 672 onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo), 673 onSelectedItemsDeleted: this.selectedItemsDeletedCallback, 674 onExceedMaxSelected: this.exceedMaxSelectedCallback, 675 onCurrentAlbumDeleted: this.currentAlbumDeletedCallback, 676 onVideoPlayStateChanged: this.videoPlayStateChangedCallback, 677 pickerController: this.pickerController, 678 }).height('60%').width('100%') 679 680 // 这里模拟应用侧底部的选择栏。 681 if (this.isBrowserShow) { 682 Row() { 683 ForEach(this.selectUris, (uri: string) => { 684 if (uri === this.currentUri) { 685 Image(uri) 686 .height('10%') 687 .width('10%') 688 .onClick(() => { 689 }) 690 .borderWidth(1) 691 .borderColor('red') 692 } else { 693 Image(uri).height('10%').width('10%').onClick(() => { 694 this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris); 695 this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL); 696 }) 697 } 698 }, (uri: string) => JSON.stringify(uri)) 699 } 700 } else { 701 Button('预览').width('33%').height('5%').onClick(() => { 702 if (this.selectUris.length > 0) { 703 this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY); 704 } 705 }) 706 } 707 } 708 } 709 } 710} 711``` 712