• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.file.AlbumPickerComponent (AlbumPickerComponent)
2
3The **AlbumPickerComponent** component embedded in the UI of an application allows the application to access the albums in the user directory without any permission.
4
5This component must be used together with [PhotoPickerComponent](ohos-file-PhotoPickerComponent.md). When a user selects an album by using **AlbumPickerComponent**, **PhotoPickerComponent** is instructed to update the photos and videos in the album.
6
7> **NOTE**
8>
9> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
10
11## Modules to Import
12
13```ts
14import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo } from '@kit.MediaLibraryKit';
15```
16
17## Properties
18
19The [universal properties](../apis-arkui/arkui-ts/ts-universal-attributes-size.md) are supported.
20
21## AlbumPickerComponent
22
23AlbumPickerComponent({
24  albumPickerOptions?: AlbumPickerOptions,
25  onAlbumClick?: (albumInfo: AlbumInfo) => boolean
26})
27
28Allows the application to access the albums in the user directory without any permission.
29
30**Decorator**: @Component
31
32**Atomic service API**: This API can be used in atomic services since API version 12.
33
34**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
35
36**Parameters**
37
38| Name | Type | Mandatory | Description   |
39|-------|-------|-----|------------|
40| albumPickerOptions    | [AlbumPickerOptions](#albumpickeroptions) | No  |  **AlbumPicker** configuration.                         |
41| onAlbumClick  | (albumInfo: [AlbumInfo](#albuminfo)) => boolean   | No  |  Callback used to return the album URI when an album is selected by a user.  |
42
43## AlbumPickerOptions
44
45Represents the **AlbumPicker** configuration.
46
47**Atomic service API**: This API can be used in atomic services since API version 12.
48
49**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
50
51| Name | Type | Mandatory | Description   |
52|------|-------|-----|----------|
53| themeColorMode  | [PickerColorMode](ohos-file-PhotoPickerComponent.md#pickercolormode) | No  | Theme color of the album page. The options are **AUTO**, **Light**, and **Dark**. The default value is **AUTO**.|
54
55## AlbumInfo
56
57Represents album information.
58
59**Atomic service API**: This API can be used in atomic services since API version 12.
60
61**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
62
63| Name | Type | Mandatory | Description   |
64|------|------|-----|---------|
65| uri  | string | No  | Album URI.|
66| albumName  | string | No  | Album name.|
67
68## Example
69
70```ts
71// xxx.ets
72import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, PickerColorMode } from '@kit.MediaLibraryKit';
73
74@Entry
75@Component
76struct PickerDemo {
77  albumPickerOptions: AlbumPickerOptions = new AlbumPickerOptions();
78
79  aboutToAppear() {
80    this.albumPickerOptions.themeColorMode = PickerColorMode.AUTO;
81  }
82
83  private onAlbumClick(albumInfo: AlbumInfo): boolean {
84    if (albumInfo?.uri) {
85      // pickerController instructs PhotoPickerComponent to refresh data.
86    }
87    if (albumInfo?.albumName) {
88      // Perform subsequent processing based on the obtained albumName.
89    }
90    return true;
91  }
92
93  build() {
94    Stack() {
95      AlbumPickerComponent({
96        albumPickerOptions: this.albumPickerOptions,
97        onAlbumClick:(albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
98      }).height('100%').width('100%')
99    }
100  }
101}
102
103```