1# @ohos.file.PhotoPickerComponent (Photo Picker组件) 2 3应用可以在布局中嵌入Photo Picker组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。仅包含读权限。 4应用嵌入组件后，用户可直接在Photo Picker组件中选择图片或视频文件。 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, ExceedMaxSeletedCallback, 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?: ExceedMaxSeletedCallback, 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> | [ExceedMaxSeletedCallback](#exceedmaxseletedcallback13) | 否 | - | 选择达到最大选择数量（最大图片选择数量或者是最大视频选择数量亦或是总的最大选择数量）之后再次点击勾选时产生的回调。<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| pickerController | [PickerController](#pickercontroller) | 否 | @ObjectLink | 应用可通过PickerController向Picker组件发送数据。 | 72 73## PickerOptions 74 75继承自[BaseSelectOptions](js-apis-photoAccessHelper.md#baseselectoptions12)。 76 77Picker配置选项。 78 79**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 80 81**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 82 83| 名称 | 类型 | 必填 | 说明 | 84|---------------------------------|-----------------------------------------|-----|--------------------------------------------------------------------------| 85| checkBoxColor | string | 否 | 勾选框的背景色。格式为8位十六进制颜色代码。 | 86| backgroundColor | string | 否 | picker宫格页面背景色。格式为8位十六进制颜色代码。 | 87| isRepeatSelectSupported | boolean | 否 | 是否支持单张图片重复选择。true表示支持。 | 88| checkboxTextColor | string | 否 | 勾选框内文本颜色。格式为8位十六进制颜色代码。 （该能力暂不支持） | 89| photoBrowserBackgroundColorMode | [PickerColorMode](#pickercolormode) | 否 | 大图背景颜色。包括跟随系统、浅色模式以及深色模式，默认为跟随系统。 | 90| maxSelectedReminderMode | [ReminderMode](#remindermode) | 否 | 选择数量达到最大时的提示方式。包括弹toast提示、不提示以及蒙层提示，默认为弹toast提示。 | 91| orientation | [PickerOrientation](#pickerorientation) | 否 | 宫格页面滑动预览方向，包括水平和竖直两个方向，默认为竖直方向。（该能力暂不支持） | 92| selectMode | [SelectMode](#selectmode) | 否 | 选择模式。包括多选和单选，默认为多选。 | 93| maxPhotoSelectNumber | number | 否 | 图片最大的选择数量。最大值为500，受到最大选择总数的限制。 | 94| maxVideoSelectNumber | number | 否 | 视频最大的选择数量。最大值为500，受到最大选择总数的限制。 | 95| isSlidingSelectionSupported<sup>13+</sup> | boolean | 否 | 是否支持滑动多选，默认不支持。重复选择场景不支持滑动多选。 | 96| photoBrowserCheckboxPosition<sup>13+</sup> | [number, number] | 否 | 设置大图页checkbox的位置。第一个参数为X方向偏移量，第二个参数为Y方向偏移量。传参范围0-1，代表距离组件左上角0%-100%的偏移量。 | 97 98## ItemsDeletedCallback<sup>13+</sup> 99 100type ItemsDeletedCallback = (baseItemInfos: Array<BaseItemInfo>) => void 101 102已勾选的图片被删除时产生的回调事件。 103 104**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 105 106**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 107 108**参数：** 109 110| 参数名 | 类型 | 必填 | 说明 | 111| -------- |--------------------------------------------| -------- |----------| 112| baseItemInfos | Array<[BaseItemInfo](#baseiteminfo)> | 是 | 照片的基本信息。 | 113 114## ExceedMaxSeletedCallback<sup>13+</sup> 115 116type ExceedMaxSeletedCallback = (exceedMaxCountType: MaxCountType) => void 117 118选择达到最大选择数量之后再次点击勾选时的回调事件。 119 120**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 121 122**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 123 124**参数：** 125 126| 参数名 | 类型 | 必填 | 说明 | 127| -------- |-------------------------------| -------- |----------------------------------------------| 128| exceedMaxCountType | [MaxCountType](#maxcounttype) | 是 | 达到最大选择数量的类型。类型包含图片最大选择数量、视频最大选择数量以及总的最大选择数量。 | 129 130## CurrentAlbumDeletedCallback<sup>13+</sup> 131 132type CurrentAlbumDeletedCallback = () => void 133 134当前相册被删除时的回调事件。 135 136**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 137 138**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 139 140## PickerController 141 142应用可通过PickerController向picker组件发送数据。 143 144**装饰器类型**：@Observed 145 146**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 147 148**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 149 150### setData 151 152setData(dataType: DataType, data: Object): void 153 154应用可通过该接口向picker组件发送数据，并通过DataType来区分具体发送什么类型的数据。 155 156**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 157 158**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 159 160**参数：** 161 162| 参数名 | 类型 | 必填 | 说明 | 163| ------------------------- | ------------------ | ----- | --------------- | 164| dataType | [DataType](#datatype) | 是 | 发送数据的数据类型。| 165| data | Object | 是 | 发送的数据。 | 166 167### setMaxSelected 168 169setMaxSelected(maxSelected: MaxSelected): void 170 171应用可通过该接口，实时地设置图片的最大选择数量、视频的最大选择数量以及总的最大选择数量。 172 173**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 174 175**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 176 177**参数：** 178 179| 参数名 | 类型 | 必填 | 说明 | 180| ------------------------- | ------------------ | ----- | --------------- | 181| maxSelected | [MaxSelected](#maxselected) | 是 | 最大选择数量。| 182 183### setPhotoBrowserItem 184 185setPhotoBrowserItem(uri: string, photoBrowserRange?: PhotoBrowserRange): void 186 187应用可通过该接口,切换picker组件至大图浏览模式浏览图片；当已处于大图浏览模式时，切换浏览的图片。 188 189**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 190 191**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| ------------------------- | ------------------ | ----- | --------------- | 197| uri | string | 是 | 指定大图浏览的图片uri。仅支持指定用户已选择的图片，未选择的图片不生效。| 198| photoBrowserRange | [PhotoBrowserRange](#photobrowserrange) | 否 | 打开大图浏览模式后，左右滑动切换浏览图片的范围，可配置仅浏览用户选择的或浏览全部图片，视频。默认：PhotoBrowserRange.ALL。浏览全部图片，视频。 | 199 200### exitPhotoBrowser<sup>13+</sup> 201 202exitPhotoBrowser(): void 203 204应用可通过该接口，向picker发送退出大图的通知。 205 206**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 207 208**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 209 210### setPhotoBrowserUIElementVisibility<sup>13+</sup> 211 212setPhotoBrowserUIElementVisibility(elements: Array<PhotoBrowserUIElement>, isVisible: boolean): void 213 214应用可通过该接口，设置大图页大图预览组件外其他UI元素是否可见。不设置则默认可见。 215 216**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 217 218**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 219 220**参数：** 221 222| 参数名 | 类型 | 必填 | 说明 | 223|-------------|----------------------------------------------------------------| ----- |-------------------| 224| elements | Array<[PhotoBrowserUIElement](#photobrowseruielement13)> | 是 | 大图页大图预览组件外其他UI元素。 | 225| isVisible | boolean | 是 | 是否可见。 | 226 227## BaseItemInfo 228 229图片、视频相关信息。 230 231**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 232 233**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 234 235| 名称 | 类型 | 必填 | 说明 | 236|----------|--------|-----|---------------------------------------------------| 237| uri | string | 否 | 图片、视频的uri（itemType为ThUMBNAIL时支持，否则为空）。 | 238| mimeType | string | 否 | 图片、视频的mimeType（itemType为ThUMBNAIL时支持，否则为空）。 | 239| width | number | 否 | 图片、视频的宽（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 240| height | number | 否 | 图片、视频的高（单位：像素）（itemType为ThUMBNAIL时支持，否则为空）。 | 241| size | number | 否 | 图片、视频的大小（单位：千字节）（itemType为ThUMBNAIL时支持，否则为空）。 | 242| duration | number | 否 | 视频的时长（单位：毫秒），图片时返回-1（itemType为ThUMBNAIL时支持，否则为空）。 | 243 244## ItemInfo 245 246继承自[BaseItemInfo]，仅含私有参数itemType 247 248图片、视频相关信息。 249 250**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 251 252**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 253 254| 名称 | 类型 | 必填 | 说明 | 255|----------|--------|-----|---------------------------------------------------| 256| itemType | [ItemType](#itemtype) | 否 | 被点击的item类型。包括缩略图item和相机item。 | 257 258## PhotoBrowserInfo 259 260大图相关信息。 261 262**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 263 264**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 265 266| 名称 | 类型 | 必填 | 说明 | 267|----------|--------|-----|---------| 268| animatorParams | [AnimatorParams](#animatorparams) | 否 | 进入、退出大图界面时的动效参数。 | 269 270## AnimatorParams 271 272进退大图动效参数。 273 274**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 275 276**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 277 278| 名称 | 类型 | 必填 | 说明 | 279|----------|--------|-----|--------------| 280| duration | number | 否 | 动效时长（单位：毫秒）。 | 281| curve | [Curve](../apis-arkui/js-apis-curve.md#curve) | [ICurve](../apis-arkui/js-apis-curve.md#icurve9) | string | 否 | 动效曲线。 | 282 283## MaxSelected 284 285最大选择数量。 286 287**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 288 289**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 290 291| 名称 | 类型 | 必填 | 说明 | 292|----------|--------|-----|---------| 293| data | Map<[MaxCountType](#maxcounttype), number> | 否 | 最大选择数量（包含图片的最大选择数量、视频的最大选择数量以及总的最大选择数量） | 294 295## DataType 296 297枚举，PickerController向picker组件发送数据的数据类型。 298 299**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 300 301**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 302 303| 名称 | 值 | 说明 | 304|-------------------|-----|--------------------------------------------------------------------------------------------------------------------| 305| SET_SELECTED_URIS | 1 | 发送已选择的数据列表，通知picker组件勾选状态刷新，需要传入string数组类型。<br>例如：应用在自己的页面中删除某张图片后，需要把剩下的已选择的数据列表通过setData接口通知到picker组件，从而触发picker组件勾选框状态刷新正确。 | 306| SET_ALBUM_URI | 2 | 应用按需设置图片的最大选择数量、视频的最大选择数量以及总的最大选择数量。 | 307 308## ItemType 309 310被点击item的类型。 311 312**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 313 314**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 315 316| 名称 | 值 | 说明 | 317|-------------------|-----|------------| 318| THUMBNAIL | 0 | 图片、视频item（缩略图item）。 | 319| CAMERA | 1 | 相机item。 | 320 321## ClickType 322 323点击操作的类型。 324 325**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 326 327**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 328 329| 名称 | 值 | 说明 | 330|-------------------|-----|------------------------| 331| SELECTED | 0 | 选择操作（勾选图片或者点击相机item）。 | 332| DESELECTED | 1 | 取消选择操作（取消勾选图片）。 | 333 334## PickerOrientation 335 336Picker宫格页面滑动预览的方向。（该能力暂不支持） 337 338**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 339 340**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 341 342| 名称 | 值 | 说明 | 343|-------------------|-----|-------| 344| VERTICAL | 0 | 竖直方向。 | 345| HORIZONTAL | 1 | 水平方向。 | 346 347## SelectMode 348 349选择模式。 350 351**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 352 353**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 354 355| 名称 | 值 | 说明 | 356|-------------------|-----|-------| 357| SINGLE_SELECT | 0 | 单选模式。 | 358| MULTI_SELECT | 1 | 多选模式。 | 359 360## PickerColorMode 361 362Picker的颜色模式。 363 364**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 365 366**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core。 367 368| 名称 | 值 | 说明 | 369|-------------------|-----|-------| 370| AUTO | 0 | 跟随系统。 | 371| LIGHT | 1 | 浅色模式。 | 372| DARK | 2 | 深色模式。 | 373 374## ReminderMode 375 376最大选择数量提示方式。 377 378**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 379 380**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 381 382| 名称 | 值 | 说明 | 383|-------------------|-----|-----------| 384| NONE | 0 | 不提示。 | 385| TOAST | 1 | 弹toast提示。 | 386| MASK | 2 | 蒙灰提示。 | 387 388## MaxCountType 389 390最大选择数量的类型。 391 392**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 393 394**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 395 396| 名称 | 值 | 说明 | 397|-------------------|-----|---------------------------| 398| TOTAL_MAX_COUNT | 0 | 总的最大选择数量。 | 399| PHOTO_MAX_COUNT | 1 | 图片的最大选择数量（不能大于总的最大选择数量）。 | 400| VIDEO_MAX_COUNT | 2 | 视频的最大选择数量（不能大于总的最大选择数量）。 | 401 402## PhotoBrowserRange 403 404打开大图浏览模式后，左右滑动切换浏览图片的范围。 405 406**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。 407 408**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 409 410| 名称 | 值 | 说明 | 411|-------------------|-----|---------------------------| 412| ALL | 0 | 全部图片，视频。 | 413| SELECTED_ONLY | 1 | 仅用户已选择的图片，视频。 | 414 415## PhotoBrowserUIElement<sup>13+</sup> 416 417大图页大图预览组件外其他UI元素。 418 419**原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 420 421**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core 422 423| 名称 | 值 | 说明 | 424|-------------|-----|----------| 425| CHECKBOX | 0 | 大图页勾选框。 | 426| BACK_BUTTON | 1 | 大图页返回按钮。 | 427 428## 示例 429 430```ts 431// xxx.ets 432import { 433 PhotoPickerComponent, PickerController, PickerOptions, 434 DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, AnimatorParams, 435 MaxSelected, ItemType, ClickType, PickerOrientation, 436 SelectMode, PickerColorMode, ReminderMode, MaxCountType, PhotoBrowserRange, PhotoBrowserUIElement, 437 ItemsDeletedCallback, ExceedMaxSeletedCallback, CurrentAlbumDeletedCallback 438} from '@ohos.file.PhotoPickerComponent'; 439import photoAccessHelper from '@ohos.file.photoAccessHelper'; 440 441@Entry 442@Component 443struct PickerDemo { 444 pickerOptions: PickerOptions = new PickerOptions(); 445 @State pickerController: PickerController = new PickerController(); 446 @State selectUris: Array<string> = new Array<string>(); 447 @State currentUri: string = ''; 448 @State isBrowserShow: boolean = false; 449 private selectedItemsDeletedCallback: ItemsDeletedCallback = (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(recentPhotoExists); 450 private exceedMaxSeletedCallback: ExceedMaxSeletedCallback = (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(recentPhotoInfo); 451 private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted(); 452 453 aboutToAppear() { 454 this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 455 this.pickerOptions.maxSelectNumber = 5; 456 this.pickerOptions.isSearchSupported = false; 457 this.pickerOptions.isPhotoTakingSupported = false; 458 this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5]; 459 // 其他属性..... 460 } 461 462 private onSelect(uri: string): void { 463 // 添加 464 if (uri) { 465 this.selectUris.push(uri); 466 } 467 } 468 469 private onDeselect(uri: string): void { 470 // 移除 471 if (uri) { 472 this.selectUris = this.selectUris.filter((item: string) => { 473 return item != uri; 474 }) 475 } 476 } 477 478 private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean { 479 if (!itemInfo) { 480 return false; 481 } 482 let type: ItemType | undefined = itemInfo.itemType; 483 let uri: string | undefined = itemInfo.uri; 484 if (type === ItemType.CAMERA) { 485 // 点击相机item 486 return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false。 487 } else { 488 if (clickType === ClickType.SELECTED) { 489 // 应用做自己的业务处理 490 if (uri) { 491 this.selectUris.push(uri); 492 this.pickerOptions.preselectedUris = [...this.selectUris]; 493 } 494 return true; // 返回true则勾选，否则则不响应勾选。 495 } else { 496 if (uri) { 497 this.selectUris = this.selectUris.filter((item: string) => { 498 return item != uri; 499 }); 500 this.pickerOptions.preselectedUris = [...this.selectUris]; 501 } 502 } 503 return true; 504 } 505 } 506 507 private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 508 // 进入大图的回调 509 this.isBrowserShow = true; 510 return true; 511 } 512 513 private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 514 // 退出大图的回调 515 this.isBrowserShow = false; 516 return true; 517 } 518 519 private onPickerControllerReady(): void { 520 // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。 521 let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON]; 522 this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // 设置大图页不显示返回按钮 523 } 524 525 private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean { 526 // 大图左右滑动的回调 527 this.currentUri = browserItemInfo.uri ?? ''; 528 return true; 529 } 530 531 private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void { 532 // 已勾选图片被删除时的回调 533 } 534 535 private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void { 536 // 超过最大选择数量再次点击时的回调 537 } 538 539 private onCurrentAlbumDeleted(): void { 540 // 当前相册被删除时的回调 541 } 542 543 build() { 544 Flex({ 545 direction: FlexDirection.Column, 546 justifyContent: FlexAlign.Center, 547 alignItems: ItemAlign.Center 548 }) { 549 Column() { 550 if (this.isBrowserShow) { 551 // 这里模拟应用自己的大图返回按钮 552 Row() { 553 Button("退出大图").width('33%').height('8%').onClick(() => { 554 this.pickerController.exitPhotoBrowser(); 555 }) 556 }.margin({ bottom: 20 }) 557 } 558 559 PhotoPickerComponent({ 560 pickerOptions: this.pickerOptions, 561 // onSelect: (uri: string): void => this.onSelect(uri), 562 // onDeselect: (uri: string): void => this.onDeselect(uri), 563 onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType), // 该接口可替代上面两个接口 564 onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo), 565 onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo), 566 onPickerControllerReady: (): void => this.onPickerControllerReady(), 567 onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo), 568 onSelectedItemsDeleted?: this.selectedItemsDeletedCallback, 569 onExceedMaxSelected?: this.exceedMaxSeletedCallback, 570 onCurrentAlbumDeleted?: this.currentAlbumDeletedCallback, 571 pickerController: this.pickerController, 572 }).height('60%').width('100%') 573 574 // 这里模拟应用侧底部的选择栏 575 if (this.isBrowserShow) { 576 Row() { 577 ForEach(this.selectUris, (uri: string) => { 578 if (uri === this.currentUri) { 579 Image(uri).height('10%').width('10%').onClick(() => { 580 }).borderWidth(1).borderColor('red') 581 } else { 582 Image(uri).height('10%').width('10%').onClick(() => { 583 this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris); 584 this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL); 585 }) 586 } 587 }, (uri: string) => JSON.stringify(uri)) 588 } 589 } else { 590 Button('预览').width('33%').height('5%').onClick(() => { 591 if (this.selectUris.length > 0) { 592 this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY); 593 } 594 }) 595 } 596 } 597 } 598 } 599} 600``` 601