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&lt;BaseItemInfo&gt;) => void
104
105已勾选的图片被删除时产生的回调事件。
106
107**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
108
109**系统能力**:SystemCapability.FileManagement.PhotoAccessHelper.Core
110
111**参数:**
112
113| 参数名 | 类型                                         | 必填 | 说明       |
114| -------- |--------------------------------------------| -------- |----------|
115| baseItemInfos | Array&lt;[BaseItemInfo](#baseiteminfo)&gt; | 是 | 照片的基本信息。 |
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&lt;PhotoBrowserUIElement&gt;, 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&lt;[PhotoBrowserUIElement](#photobrowseruielement13)&gt; | 是 | 大图页大图预览组件外其他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) &verbar; [ICurve](../apis-arkui/js-apis-curve.md#icurve9) &verbar; string | 否   | 动效曲线。        |
295
296## MaxSelected
297
298最大选择数量。
299
300**原子化服务API**:从API version 12开始,该接口支持在原子化服务中使用。
301
302**系统能力**:SystemCapability.FileManagement.PhotoAccessHelper.Core
303
304| 名称     | 类型    | 必填  | 说明     |
305|----------|--------|-----|---------|
306| data | Map&lt;[MaxCountType](#maxcounttype), number&gt; | 否             | 最大选择数量(包含图片的最大选择数量、视频的最大选择数量以及总的最大选择数量) |
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.Core380
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