HarmonyOS：使用AlbumPicker组件访问相册列表

一、概述

开发者可以在布局中嵌入AlbumPickerComponent组件，通过此组件，应用无需申请权限，即可访问公共目录中的相册列表。
需配合PhotoPickerComponent一起使用，用户通过AlbumPickerComponent组件选择对应相册并通知PhotoPickerComponent组件刷新成对应相册的图片和视频。

界面效果如图所示

二、开发步骤

2.1 导入相册组件模块文件

import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo} from '@kit.MediaLibraryKit';

2.2 创建相册组件配置选项实例（AlbumPickerOptions）

通过AlbumPickerOptions，开发者可配置相册页主题颜色。

// 用于相册组件初始化时设置参数信息
albumOptions: AlbumPickerOptions = new AlbumPickerOptions();

2.3 初始化组件配置选项实例（AlbumPickerOptions）

/**
 * 设置相册页颜色模式， 默认AUTO。
 * AUTO：跟随系统的模式， LIGHT：浅色模式， DARK：深色模式
 */
this.albumOptions.themeColorMode = PickerColorMode.AUTO;

2.4 创建AlbumPickerComponent组件

AlbumPickerComponent({
  // 设置组件选择选项实例
  albumPickerOptions: this.albumOptions,


  /**
   *相册被选中回调，返回相册信息
   * AlbumInfo（uri）
   */
  onAlbumClick: (albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
})

2.5 与PhotoPicker组件联动，将相册URI给到应用，根据相册URI更新PhotoPicker组件宫格页内容

private onAlbumClick(albumInfo: AlbumInfo): boolean {
    if (albumInfo?.uri) {
        // 根据相册url更新宫格页内容
        this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri);      
    }
    return true;
}

三、完整示例代码

TestAlbumPicker.ets

import {
  AlbumPickerComponent,
  AlbumPickerOptions,
  AlbumInfo,
  PickerColorMode,
  DataType,
  PickerController,
  photoAccessHelper,
  PhotoPickerComponent
} from '@kit.MediaLibraryKit';
import { EmptyAreaClickCallback } from '@ohos.file.AlbumPickerComponent';

@Entry
@Component
struct TestAlbumPicker {
  @State message: string = '使用AlbumPicker组件访问相册列表';
  // 组件初始化完成后，可控制组件部分行为
  @State pickerController: PickerController = new PickerController();
  /*
    2. 创建相册组件配置选项实例（AlbumPickerOptions）。
      通过AlbumPickerOptions，开发者可配置相册页主题颜色，详见AlbumPickerOptions API参考。
   */
  // 用于相册组件初始化时设置参数信息
  albumOptions: AlbumPickerOptions = new AlbumPickerOptions();
   // 点击相册组件空白区域时产生的回调事件
  private emptyAreaClickCallback: EmptyAreaClickCallback = (): void => this.onEmptyAreaClick();

  // 4. 创建AlbumPickerComponent组件

  // 5. 与PhotoPicker组件联动，将相册URI给到应用，根据相册URI更新PhotoPicker组件宫格页内容
  private onAlbumClick(albumInfo: AlbumInfo): boolean {
    if (albumInfo?.uri) {
      // 通过pickerController向PhotoPickerComponent发送消息，通知其刷新。
      // 根据相册url更新宫格页内容
      this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri);
    }
    if (albumInfo?.albumName) {
      // 基于获取到的albumName后续逻辑处理。
    }
    return true;
  }

  private onEmptyAreaClick(): void {
    // 点击组件空白区域回调。
  }

  aboutToAppear() {
    /*
     * 3. 初始化组件配置选项实例（AlbumPickerOptions）
     * 设置相册页颜色模式， 默认AUTO。
     * AUTO：跟随系统的模式， LIGHT：浅色模式， DARK：深色模式
     */
    this.albumOptions.themeColorMode = PickerColorMode.AUTO;
    // this.albumOptions.filterType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
  }

  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .id('TestAlbumPickerHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      PhotoPickerComponent({
        pickerController: this.pickerController,
      })
        .height('30%')

      AlbumPickerComponent({
        // 设置组件选择选项实例
        albumPickerOptions: this.albumOptions,
        /**
         *相册被选中回调，返回相册信息
         * AlbumInfo（uri）
         */
        onAlbumClick: (albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
        onEmptyAreaClick: this.emptyAreaClickCallback,
      })

    }
    .width('100%')
    .height('100%')
    .padding({ top: 20 })
  }
}