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-universal-attributes-size.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>当前相册是指通过pickerContorller.[setData](#setdata)([DataType](#datatype).SET_ALBUM_URI, currentAlbumUri)接口设置给宫格组件的相册，即“currentAlbumUri”。<br>当前相册被删除后若使用方刷新自己的相册标题栏，使用方可以设置自己的标题栏名称为默认的相册名例如“图片和视频”、“图片”或“视频”，然后通过pickerContorller.[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，受到最大选择总数的限制。 | 95| maxVideoSelectNumber | number | 否 | 视频最大的选择数量。最大值为500，受到最大选择总数的限制。 | 96| isSlidingSelectionSupported<sup>13+</sup> | boolean | 否 | 是否支持滑动多选，默认不支持。重复选择场景不支持滑动多选。 | 97| photoBrowserCheckboxPosition<sup>13+</sup> | [number, number] | 否 | 设置大图页checkbox的位置。第一个参数为X方向偏移量，第二个参数为Y方向偏移量。传参范围0-1，代表距离组件左上角0%-100%的偏移量。 | 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 | 是 | 是否可见。 | 239 240## BaseItemInfo 241 242图片、视频相关信息。 243 244**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 245 246**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 247 248| 名称 | 类型 | 必填 | 说明 | 249|----------|--------|-----|---------------------------------------------------| 250| uri | string | 否 | 图片、视频的uri（itemType为ThUMBNAIL时支持，否则为空）。 | 251| mimeType | string | 否 | 图片、视频的mimeType（itemType为ThUMBNAIL时支持，否则为空）。 | 252| width | number | 否 | 图片、视频的宽（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 253| height | number | 否 | 图片、视频的高（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 254| size | number | 否 | 图片、视频的大小（单位：千字节）（itemType为ThUMBNAIL时支持，否则为空）。 | 255| duration | number | 否 | 视频的时长（单位：毫秒），图片时返回-1（itemType为ThUMBNAIL时支持，否则为空）。 | 256 257## ItemInfo 258 259继承自[BaseItemInfo]，仅含私有参数itemType 260 261图片、视频相关信息。 262 263**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 264 265**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 266 267| 名称 | 类型 | 必填 | 说明 | 268|----------|--------|-----|---------------------------------------------------| 269| itemType | [ItemType](#itemtype) | 否 | 被点击的item类型。包括缩略图item和相机item。 | 270 271## PhotoBrowserInfo 272 273大图相关信息。 274 275**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 276 277**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 278 279| 名称 | 类型 | 必填 | 说明 | 280|----------|--------|-----|---------| 281| animatorParams | [AnimatorParams](#animatorparams) | 否 | 进入、退出大图界面时的动效参数。 | 282 283## AnimatorParams 284 285进退大图动效参数。 286 287**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 288 289**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 290 291| 名称 | 类型 | 必填 | 说明 | 292|----------|--------|-----|--------------| 293| duration | number | 否 | 动效时长（单位：毫秒）。 | 294| curve | [Curve](../apis-arkui/js-apis-curve.md#curve) | [ICurve](../apis-arkui/js-apis-curve.md#icurve9) | string | 否 | 动效曲线。 | 295 296## MaxSelected 297 298最大选择数量。 299 300**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 301 302**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 303 304| 名称 | 类型 | 必填 | 说明 | 305|----------|--------|-----|---------| 306| data | Map<[MaxCountType](#maxcounttype), number> | 否 | 最大选择数量（包含图片的最大选择数量、视频的最大选择数量以及总的最大选择数量） | 307 308## DataType 309 310枚举，PickerController向picker组件发送数据的数据类型。 311 312**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 313 314**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 315 316| 名称 | 值 | 说明 | 317|-------------------|-----|--------------------------------------------------------------------------------------------------------------------| 318| SET_SELECTED_URIS | 1 | 发送已选择的数据列表，通知picker组件勾选状态刷新，需要传入string数组类型。<br>例如：应用在自己的页面中删除某张图片后，需要把剩下的已选择的数据列表通过setData接口通知到picker组件，从而触发picker组件勾选框状态刷新正确。 | 319| SET_ALBUM_URI | 2 | 应用按需设置图片的最大选择数量、视频的最大选择数量以及总的最大选择数量。 | 320 321## ItemType 322 323被点击item的类型。 324 325**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 326 327**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 328 329| 名称 | 值 | 说明 | 330|-------------------|-----|------------| 331| THUMBNAIL | 0 | 图片、视频item（缩略图item）。 | 332| CAMERA | 1 | 相机item。 | 333 334## ClickType 335 336点击操作的类型。 337 338**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 339 340**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 341 342| 名称 | 值 | 说明 | 343|-------------------|-----|------------------------| 344| SELECTED | 0 | 选择操作（勾选图片或者点击相机item）。 | 345| DESELECTED | 1 | 取消选择操作（取消勾选图片）。 | 346 347## PickerOrientation 348 349Picker宫格页面滑动预览的方向。（该能力暂不支持） 350 351**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 352 353**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 354 355| 名称 | 值 | 说明 | 356|-------------------|-----|-------| 357| VERTICAL | 0 | 竖直方向。 | 358| HORIZONTAL | 1 | 水平方向。 | 359 360## SelectMode 361 362选择模式。 363 364**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 365 366**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 367 368| 名称 | 值 | 说明 | 369|-------------------|-----|-------| 370| SINGLE_SELECT | 0 | 单选模式。 | 371| MULTI_SELECT | 1 | 多选模式。 | 372 373## PickerColorMode 374 375Picker的颜色模式。 376 377**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 378 379**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core。 380 381| 名称 | 值 | 说明 | 382|-------------------|-----|-------| 383| AUTO | 0 | 跟随系统。 | 384| LIGHT | 1 | 浅色模式。 | 385| DARK | 2 | 深色模式。 | 386 387## ReminderMode 388 389最大选择数量提示方式。 390 391**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 392 393**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 394 395| 名称 | 值 | 说明 | 396|-------------------|-----|-----------| 397| NONE | 0 | 不提示。 | 398| TOAST | 1 | 弹toast提示。 | 399| MASK | 2 | 蒙灰提示。 | 400 401## MaxCountType 402 403最大选择数量的类型。 404 405**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 406 407**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 408 409| 名称 | 值 | 说明 | 410|-------------------|-----|---------------------------| 411| TOTAL_MAX_COUNT | 0 | 总的最大选择数量。 | 412| PHOTO_MAX_COUNT | 1 | 图片的最大选择数量（不能大于总的最大选择数量）。 | 413| VIDEO_MAX_COUNT | 2 | 视频的最大选择数量（不能大于总的最大选择数量）。 | 414 415## PhotoBrowserRange 416 417打开大图浏览模式后，左右滑动切换浏览图片的范围。 418 419**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 420 421**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 422 423| 名称 | 值 | 说明 | 424|-------------------|-----|---------------------------| 425| ALL | 0 | 全部图片，视频。 | 426| SELECTED_ONLY | 1 | 仅用户已选择的图片，视频。 | 427 428## PhotoBrowserUIElement<sup>13+</sup> 429 430大图页大图预览组件外其他UI元素。 431 432**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 433 434**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 435 436| 名称 | 值 | 说明 | 437|-------------|-----|----------| 438| CHECKBOX | 0 | 大图页勾选框。 | 439| BACK_BUTTON | 1 | 大图页返回按钮。 | 440 441## VideoPlayerState<sup>14+</sup> 442 443视频播放状态。 444**原子化服务API**：从API version 14开始，该接口支持在原子化服务中使用。 445 446**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 447 448| 名称 | 值 | 说明 | 449|-------------------|-----|---------------------------| 450| PLAYING | 0 | 视频播放中。 | 451| PAUSED | 1 | 视频播放暂停。 | 452| STOPPED | 2 | 视频播放停止。 | 453| SEEK_START | 3 | 开始拖拽进度条。 | 454| SEEK_FINSH | 4 | 结束拖拽进度条。 | 455 456## 示例 457 458```ts 459// xxx.ets 460import { 461 PhotoPickerComponent, 462 PickerController, 463 PickerOptions, 464 DataType, 465 BaseItemInfo, 466 ItemInfo, 467 PhotoBrowserInfo, 468 AnimatorParams, 469 MaxSelected, 470 ItemType, 471 ClickType, 472 PickerOrientation, 473 SelectMode, 474 PickerColorMode, 475 ReminderMode, 476 MaxCountType, 477 PhotoBrowserRange, 478 PhotoBrowserUIElement, 479 ItemsDeletedCallback, 480 ExceedMaxSelectedCallback, 481 CurrentAlbumDeletedCallback, 482 videoPlayStateChangedCallback 483} from '@ohos.file.PhotoPickerComponent'; 484import photoAccessHelper from '@ohos.file.photoAccessHelper'; 485 486@Entry 487@Component 488struct PickerDemo { 489 pickerOptions: PickerOptions = new PickerOptions(); 490 @State pickerController: PickerController = new PickerController(); 491 @State selectUris: Array<string> = new Array<string>(); 492 @State currentUri: string = ''; 493 @State isBrowserShow: boolean = false; 494 private selectedItemsDeletedCallback: ItemsDeletedCallback = 495 (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(baseItemInfos); 496 private exceedMaxSelectedCallback: ExceedMaxSelectedCallback = 497 (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(exceedMaxCountType); 498 private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted(); 499 private videoPlayStateChangedCallback: videoPlayStateChangedCallback = () => this.videoPlayStateChanged(); 500 501 aboutToAppear() { 502 this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 503 this.pickerOptions.maxSelectNumber = 5; 504 this.pickerOptions.isSearchSupported = false; 505 this.pickerOptions.isPhotoTakingSupported = false; 506 this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5]; 507 // 其他属性..... 508 } 509 510 private onSelect(uri: string): void { 511 // 添加 512 if (uri) { 513 this.selectUris.push(uri); 514 } 515 } 516 517 private onDeselect(uri: string): void { 518 // 移除 519 if (uri) { 520 this.selectUris = this.selectUris.filter((item: string) => { 521 return item != uri; 522 }) 523 } 524 } 525 526 private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean { 527 if (!itemInfo) { 528 return false; 529 } 530 let type: ItemType | undefined = itemInfo.itemType; 531 let uri: string | undefined = itemInfo.uri; 532 if (type === ItemType.CAMERA) { 533 // 点击相机item 534 return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false。 535 } else { 536 if (clickType === ClickType.SELECTED) { 537 // 应用做自己的业务处理 538 if (uri) { 539 this.selectUris.push(uri); 540 this.pickerOptions.preselectedUris = [...this.selectUris]; 541 } 542 return true; // 返回true则勾选，否则则不响应勾选。 543 } else { 544 if (uri) { 545 this.selectUris = this.selectUris.filter((item: string) => { 546 return item != uri; 547 }); 548 this.pickerOptions.preselectedUris = [...this.selectUris]; 549 } 550 } 551 return true; 552 } 553 } 554 555 private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 556 // 进入大图的回调 557 this.isBrowserShow = true; 558 return true; 559 } 560 561 private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 562 // 退出大图的回调 563 this.isBrowserShow = false; 564 return true; 565 } 566 567 private onPickerControllerReady(): void { 568 // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。 569 let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON]; 570 this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // 设置大图页不显示返回按钮 571 } 572 573 private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean { 574 // 大图左右滑动的回调 575 this.currentUri = browserItemInfo.uri ?? ''; 576 return true; 577 } 578 579 private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void { 580 // 已勾选图片被删除时的回调 581 } 582 583 private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void { 584 // 超过最大选择数量再次点击时的回调 585 } 586 587 private onCurrentAlbumDeleted(): void { 588 // 当前相册被删除时的回调 589 } 590 591 private videoPlayStateChanged(stata: videoPlayerState): void { 592 // 当视频播放状态变化时回调 593 } 594 build() { 595 Flex({ 596 direction: FlexDirection.Column, 597 justifyContent: FlexAlign.Center, 598 alignItems: ItemAlign.Center 599 }) { 600 Column() { 601 if (this.isBrowserShow) { 602 // 这里模拟应用自己的大图返回按钮 603 Row() { 604 Button("退出大图").width('33%').height('8%').onClick(() => { 605 this.pickerController.exitPhotoBrowser(); 606 }) 607 }.margin({ bottom: 20 }) 608 } 609 610 PhotoPickerComponent({ 611 pickerOptions: this.pickerOptions, 612 // onSelect: (uri: string): void => this.onSelect(uri), 613 // onDeselect: (uri: string): void => this.onDeselect(uri), 614 onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, 615 clickType), // 该接口可替代上面两个接口 616 onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo), 617 onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo), 618 onPickerControllerReady: (): void => this.onPickerControllerReady(), 619 onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo), 620 onSelectedItemsDeleted: this.selectedItemsDeletedCallback, 621 onExceedMaxSelected: this.exceedMaxSelectedCallback, 622 onCurrentAlbumDeleted: this.currentAlbumDeletedCallback, 623 onVideoPlayStateChanged: this.videoPlayStateChangedCallback, 624 pickerController: this.pickerController, 625 }).height('60%').width('100%') 626 627 // 这里模拟应用侧底部的选择栏 628 if (this.isBrowserShow) { 629 Row() { 630 ForEach(this.selectUris, (uri: string) => { 631 if (uri === this.currentUri) { 632 Image(uri) 633 .height('10%') 634 .width('10%') 635 .onClick(() => { 636 }) 637 .borderWidth(1) 638 .borderColor('red') 639 } else { 640 Image(uri).height('10%').width('10%').onClick(() => { 641 this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris); 642 this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL); 643 }) 644 } 645 }, (uri: string) => JSON.stringify(uri)) 646 } 647 } else { 648 Button('预览').width('33%').height('5%').onClick(() => { 649 if (this.selectUris.length > 0) { 650 this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY); 651 } 652 }) 653 } 654 } 655 } 656 } 657} 658``` 659