1# @ohos.file.AlbumPickerComponent (Album Picker组件)
2
3应用可以在布局中嵌入AlbumPickerComponent组件，通过此组件，应用无需申请权限，即可访问公共目录中的相册列表。
4
5需配合[PhotoPickerComponent](ohos-file-PhotoPickerComponent.md)一起使用，用户通过AlbumPickerComponent组件选择对应相册并通知PhotoPickerComponent组件刷新成对应相册的图片和视频。
6
7> **说明：**
8>
9> 该组件从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
10
11## 导入模块
12
13```ts
14import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, photoAccessHelper } from '@kit.MediaLibraryKit';
15import { EmptyAreaClickCallback } from '@ohos.file.AlbumPickerComponent';
16```
17
18## 属性
19
20支持[通用属性](../apis-arkui/arkui-ts/ts-universal-attributes-size.md)。
21
22## AlbumPickerComponent
23
24AlbumPickerComponent({
25  albumPickerOptions?: AlbumPickerOptions,
26  onAlbumClick?: (albumInfo: AlbumInfo) => boolean,
27  onEmptyAreaClick?: EmptyAreaClickCallback
28})
29
30应用可以在布局中嵌入AlbumPickerComponent组件，通过此组件，应用无需申请权限，即可访问公共目录中的的相册列表。
31
32**装饰器类型**：@Component
33
34**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core
35
36**参数：**
37
38| 名称                 | 类型                                                  | 必填  | 说明                              |
39|--------------------|-----------------------------------------------------|-----|---------------------------------|
40| albumPickerOptions | [AlbumPickerOptions](#albumpickeroptions)           | 否   | AlbumPicker的配置信息。<br> **原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。              |
41| onAlbumClick       | (albumInfo: [AlbumInfo](#albuminfo)) => boolean     | 否   | 用户选择某个相册时产生的回调事件，将相册uri给到应用。<br> **原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。    |
42| onEmptyAreaClick<sup>13+</sup>   | [EmptyAreaClickCallback](#emptyareaclickcallback13) | 否   | 点击相册组件空白区域时产生的回调事件，将该次点击通知给应用。<br> **原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 |
43
44## AlbumPickerOptions
45
46Album Picker配置选项。
47
48**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core
49
50| 名称             | 类型  | 必填  | 说明                                                          |
51|----------------|-------|-----|-------------------------------------------------------------|
52| themeColorMode | [PickerColorMode](ohos-file-PhotoPickerComponent.md#pickercolormode) | 否   | 相册页主题颜色，包括跟随系统、浅色模式以及深色模式，默认为跟随系统。 <br> **原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。                         |
53| filterType<sup>13+</sup>     | [photoAccessHelper.PhotoViewMIMETypes](js-apis-photoAccessHelper.md#photoviewmimetypes) | 否   | 相册组件过滤参数，可筛选只显示图片、视频或者图片和视频。若未配置此参数，则某个具体相册中显示图片和视频类型的所有资源。<br> **原子化服务API**：从API version 13开始，该接口支持在原子化服务中使用。 |
54
55## EmptyAreaClickCallback<sup>13+</sup>
56
57type EmptyAreaClickCallback = () => void
58
59点击相册组件空白区域时产生的回调事件。
60
61**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。
62
63**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core
64
65## AlbumInfo
66
67相册相关信息。
68
69**原子化服务API**：从API version 12开始，该接口支持在原子化服务中使用。
70
71**系统能力**：SystemCapability.FileManagement.PhotoAccessHelper.Core
72
73| 名称  | 类型  | 必填  | 说明    |
74|------|------|-----|---------|
75| uri  | string | 否   | 相册的uri。 |
76| albumName  | string | 否   | 相册的名称。 |
77
78## 示例
79
80```ts
81// xxx.ets
82import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, PickerColorMode, photoAccessHelper } from '@kit.MediaLibraryKit';
83import { EmptyAreaClickCallback } from '@ohos.file.AlbumPickerComponent';
84
85@Entry
86@Component
87struct PickerDemo {
88  albumPickerOptions: AlbumPickerOptions = new AlbumPickerOptions();
89  private emptyAreaClickCallback: EmptyAreaClickCallback = (): void => this.onEmptyAreaClick();
90
91  aboutToAppear() {
92    this.albumPickerOptions.themeColorMode = PickerColorMode.AUTO;
93    this.albumPickerOptions.filterType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
94  }
95
96  private onAlbumClick(albumInfo: AlbumInfo): boolean {
97    if (albumInfo?.uri) {
98      // 通过pickerController向PhotoPickerComponent发送消息，通知其刷新
99    }
100    if (albumInfo?.albumName) {
101      // 基于获取到的albumName后续逻辑处理
102    }
103    return true;
104  }
105
106  private onEmptyAreaClick(): void {
107    // 点击组件空白区域回调
108  }
109
110  build() {
111    Stack() {
112      AlbumPickerComponent({
113        albumPickerOptions: this.albumPickerOptions,
114        onAlbumClick:(albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
115        onEmptyAreaClick(): this.emptyAreaClickCallback,
116      }).height('100%').width('100%')
117    }
118  }
119}
120