鸿蒙 AlbumPickerComponent组件：访问相册列表

一、AlbumPickerAlbumPickerComponent是鸿蒙提供的相册列表组件可以在布局中嵌入此组件应用无需申请权限即可访问公共目录中的相册列表。特点说明无需权限不需要申请存储权限嵌入布局可作为普通组件嵌入应用界面联动使用需配合PhotoPickerComponent使用联动机制AlbumPickerComponent相册列表 ↓ 用户选择相册 ↓ 通知PhotoPickerComponent ↓ 刷新显示对应相册的图片/视频二、导入模块import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, PickerColorMode, PickerController, DataType } from kit.MediaLibraryKit;三、创建配置选项3.1 AlbumPickerOptions说明属性类型说明themeColorModePickerColorMode相册页颜色模式3.2 PickerColorMode枚举枚举值说明AUTO跟随系统的模式默认LIGHT浅色模式DARK深色模式3.3 初始化配置// 创建相册组件配置选项实例 albumOptions: AlbumPickerOptions new AlbumPickerOptions(); pickerController: PickerController new PickerController(); // 设置相册页颜色模式 // AUTO跟随系统的模式LIGHT浅色模式DARK深色模式 this.albumOptions.themeColorMode PickerColorMode.AUTO;四、创建AlbumPickerComponent4.1 组件参数参数类型说明albumPickerOptionsAlbumPickerOptions组件配置选项onAlbumClick(albumInfo: AlbumInfo) boolean相册被选中回调4.2 AlbumInfo说明属性类型说明uristring相册URI用于更新宫格页内容4.3 使用AlbumPickerComponent({ albumPickerOptions: this.albumOptions, onAlbumClick: (albumInfo: AlbumInfo): boolean this.onAlbumClick(albumInfo), })五、与PhotoPicker组件联动5.1 联动原理用户点击相册列表中的某个相册触发onAlbumClick回调返回AlbumInfo通过PickerController.setData通知PhotoPickerComponent刷新PhotoPickerComponent显示对应相册的图片/视频5.2 联动代码private onAlbumClick(albumInfo: AlbumInfo): boolean { if (albumInfo?.uri) { // 根据相册url更新宫格页内容 this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri); } return true; }5.3 DataType枚举枚举值说明SET_ALBUM_URI设置相册URI更新宫格页内容六、完整代码import { PhotoPickerComponent, AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, PickerColorMode, PickerController, DataType } from kit.MediaLibraryKit; Entry Component struct AlbumPage { State pickerController: PickerController new PickerController(); State Width: string 100%; State Height: string 100%; State isShowAlbum: boolean false; State fontColor: string #182431222; State selectedFontColor: string #007DFF; State currentIndex: number 0; private controller: TabsController new TabsController(); albumOptions new AlbumPickerOptions(); albumOptions1 new AlbumPickerOptions(); albumOptions2 new AlbumPickerOptions(); /** * 相册被选中回调返回相册信息 * param albumInfo 相册信息包含uri */ private onAlbumClick(albumInfo: AlbumInfo): boolean { this.isShowAlbum false; if (albumInfo?.uri) { // 根据相册url更新宫格页内容 this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri); } return true; } aboutToAppear() { /** * 设置相册页颜色模式默认AUTO * AUTO跟随系统的模式LIGHT浅色模式DARK深色模式 */ this.albumOptions.themeColorMode PickerColorMode.AUTO; this.albumOptions1.themeColorMode PickerColorMode.LIGHT; this.albumOptions2.themeColorMode PickerColorMode.DARK; } // 设置导航栏的样式 Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex index ? this.selectedFontColor : this.fontColor) .fontSize(16) .fontWeight(this.currentIndex index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider() .strokeWidth(2) .color(#007DFF) .opacity(this.currentIndex index ? 1 : 0) } .width(100%) } build() { Stack() { // 主界面宫格页 Column() { Row() { Button(全部相册) .width(95%) .height(5%) .onClick(() { this.isShowAlbum true; }) } .margin({ top: 40 }) Column() { PhotoPickerComponent({ pickerController: this.pickerController, }) .height(this.Height) .width(this.Width) } .width(100%) .height(100%) .alignItems(HorizontalAlign.Center) .visibility(this.isShowAlbum ? Visibility.None : Visibility.Visible) } // 相册列表界面 if (this.isShowAlbum) { Row() { Column() { /** * 使用3个组件以便更好展示不同效果 * 注意切换tab会导致AlbumPickerComponent覆盖在PhotoPickerComponent上导致点击事件失效 * 设置PhotoPickerComponent不可见可以规避点击失效 */ Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { TabContent() { AlbumPickerComponent({ albumPickerOptions: this.albumOptions, onAlbumClick: (albumInfo: AlbumInfo): boolean this.onAlbumClick(albumInfo), }) .height(100%) .width(100%) } .tabBar(this.tabBuilder(0, 系统)) TabContent() { AlbumPickerComponent({ albumPickerOptions: this.albumOptions1, onAlbumClick: (albumInfo: AlbumInfo): boolean this.onAlbumClick(albumInfo), }) .height(100%) .width(100%) } .tabBar(this.tabBuilder(1, 浅色)) TabContent() { AlbumPickerComponent({ albumPickerOptions: this.albumOptions2, onAlbumClick: (albumInfo: AlbumInfo): boolean this.onAlbumClick(albumInfo), }) .height(100%) .width(100%) } .tabBar(this.tabBuilder(2, 深色)) } .vertical(false) .barMode(BarMode.Fixed) .barWidth(100%) .barHeight(56) .animationDuration(100) .onChange((index: number) { this.currentIndex index; }) .width(100%) .height(100%) .backgroundColor(#F1F3F5) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } .margin({ top: 40 }) } } } }八、注意事项点击事件处理切换tab会导致AlbumPickerComponent覆盖在PhotoPickerComponent上导致点击事件失效。解决方案设置PhotoPickerComponent不可见可以规避点击失效。.visibility(this.isShowAlbum ? Visibility.None : Visibility.Visible)与PhotoViewPicker对比对比项PhotoViewPickerAlbumPicker PhotoPicker形式弹窗选择器嵌入式组件相册切换不支持支持布局集成弹窗可嵌入应用布局适用场景简单选择自定义相册界面