鸿蒙实战开发-如何实现查看系统相册、最近删除、收藏夹操作功能_@ohos.file.photoaccesshelper

作者：笔触狂放9 | 2024-04-17 09:55:49

踩

@ohos.file.photoaccesshelper

介绍

本示例主要展示了相册相关的功能，使用@ohos.file.photoAccessHelper 接口，实现了查看系统相册、创建用户相册、查看相册照片、用户相册文件添加和删除、以及预览图片、最近删除、收藏夹操作等功能;

效果预览

在这里插入图片描述
使用说明

主界面：查询显示所有照片、系统相册（相机/视频/截屏录屏/我的收藏/最近删除）、用户相册
主界面点击“+”，创建用户相册
创建用户相册时添加图片到用户相册
长按相册，删除相册
长按相册，重命名相册（不可重名）
长按相册，相册多选，批量删除
点击相册，查看相册中的图片列表
点击图片，查看单个图片大图
点击心形图标，收藏图片
点击心形图标，取消收藏
大图界面，重命名文件（可重名）
大图界面，删除文件（移动到最近删除相册）
从最近删除恢复照片
点击视频，查看视频并播放
点击图片页面右上角叹号，查看图片详情
长按图片批量操作：多选/全选、删除、恢复
相册内图片列表界面点击“+”，从已有相册添加照片
长按图片列表图片，更多菜单，从图片选择添加到已有相册
在相册图片列表界面，长按图片，选择图片，点击更多，可以将图片加入到其他相册（可多选）
在用户相册图片列表界面，长按图片，选择图片，点击更多，可以将图片从当前相册移除（可多选）
在用户相册图片列表界面，长按图片，选择图片，点击更多，可以查看图片详情（可多选）

工程目录

.
├── base // @ohos.file.photoAccessHelper接口封装
│   ├── FavorUserFileDataItem.ts            // 收藏夹图片数据类
│   ├── InnerUserFileDataItem.ts            // 大图数据类
│   ├── TrashUserFileDataItemCache.ts       // 最近删除图片数据缓存
│   ├── TrashUserFileDataItem.ts            // 最近删除图片数据类
│   ├── UserFileDataChangeCallback.ts       // 图片数据变化回调
│   ├── UserFileDataHelper.ts               // 图片展示信息查询接口
│   ├── UserFileDataItemCache.ts            // 图片数据缓存
│   ├── UserFileDataItem.ts                 // 图片数据类
│   ├── UserFileModel.ts                    // photoAccessHelper接口封装
│   ├── UserFileObserverCallback.ts         // 图片数据监听回调
│   └── UserFileObserver.ts                 // 图片数据监听类
├── common //业务逻辑
│   ├── ActionBarProp.ts
│   ├── AlbumDataImpl.ts                    // 相册数据查询接口封装
│   ├── AlbumDataItem.ts                    // 相册数据类
│   ├── AlbumsDataSource.ts
│   ├── BroadcastManager.ts
│   ├── Broadcast.ts
│   ├── CommonObserverCallback.ts
│   ├── EventPipeline.ts
│   ├── GlobalContext.ts
│   ├── GroupDataImpl.ts                    // 相册成员数组数据接口封装
│   ├── GroupItemDataSource.ts              // 相册成员数组数据
│   ├── ItemDataSource.ts
│   ├── MultimodalInputManager.ts
│   ├── ScreenManager.ts                    // 屏幕显示逻辑
│   ├── SelectManager.ts                    // 选择状态逻辑
│   └── SimpleAlbumDataItem.ts              // 简化相册数据类
├── components //UI组件
│   ├── ActionBarButton.ets
│   ├── ActionBar.ets
│   ├── AddNotesDialog.ets
│   ├── AlbumGridItemNewStyle.ets
│   ├── AlbumListCard.ets
│   ├── AlbumScrollBar.ets
│   ├── AlbumSelectGridItemNewStyle.ets
│   ├── AlbumSetPage.ets
│   ├── CancelOperationDialog.ets
│   ├── CustomDialogView.ets
│   ├── DeleteDialog.ets
│   ├── DeleteProgressDialog.ets
│   ├── DetailMenuPanel.ets
│   ├── DetailsDialog.ets
│   ├── DetailTitle.ets
│   ├── EmptyAlbumComponent.ets
│   ├── FindSameNameDialog.ets
│   ├── GridScrollBar.ets
│   ├── ImageGridItemComponent.ets
│   ├── LoadingPanel.ets
│   ├── MediaOperationActionBar.ets
│   ├── MultiSelectDialog.ets
│   ├── NewAlbumDialog.ets
│   ├── NoPhotoComponent.ets
│   ├── NoPhotoIndexComponent.ets
│   ├── PhotoBrowserActionBar.ets
│   ├── PhotoBrowserBg.ets
│   ├── PhotoItem.ets
│   ├── PhotoSwiper.ets
│   ├── ProgressDialog.ets
│   ├── RenameDialog.ets
│   ├── SaveDialog.ets
│   ├── SaveImageDialog.ets
│   ├── SelectionTitle.ets
│   ├── SingleTitle.ets
│   ├── ToolBarButton.ets
│   ├── ToolBar.ets
│   └── VideoIcon.ets
├── constants //常量
│   ├── AnimationConstants.ts
│   ├── BroadcastConstants.ts
│   ├── BrowserConstants.ts
│   ├── Constants.ts
│   ├── MediaConstants.ts
│   ├── QueryConstants.ts
│   └── RouterConstants.ts
├── entryability //HAP入口
│   └── EntryAbility.ts
├── menus //菜单操作
│   ├── AlbumSetDeleteMenuOperation.ts
│   ├── AlbumSetNewMenuOperation.ts
│   ├── AlbumSetRenameMenuOperation.ts
│   ├── AsyncCallback.ts
│   ├── BatchDeleteMenuOperation.ts
│   ├── BatchRecoverMenuOperation.ts
│   ├── BatchRemoveMenuOperation.ts
│   ├── ClearRecycleMenuOperation.ts
│   ├── GotoPhotosMenuOperation.ts
│   ├── MenuContext.ts
│   ├── MenuOperationCallback.ts
│   ├── MenuOperation.ts
│   ├── MoveMenuOperation.ets
│   ├── ProcessMenuOperation.ts
│   ├── RenameMenuOperation.ts
├── models //类型定义
│   ├── ActionBarMode.ts
│   ├── Action.ts
│   ├── AlbumBarModel.ts
│   ├── AlbumSelectBarModel.ts
│   ├── JumpSourceToMain.ts
│   ├── MediaOperationType.ts
│   ├── NewAlbumBarModel.ts
│   ├── PhotoGridBarModel.ts
│   ├── ThumbnailModel.ts
│   └── ViewType.ts
├── pages //页面
│   ├── AlbumSelect.ets                           // 相册选择页面
│   ├── Index.ets                                 // 主页面
│   ├── MediaOperationPage.ets                    // 图片文件操作页面
│   ├── NewAlbumPage.ets                          // 新建相册页面
│   ├── PhotoBrowser.ets                          // 大图展示页面
│   ├── PhotoGridPage.ets                         // 图片列表页面
│   ├── SelectPhotoBrowser.ets                    // 图片选择页面
│   └── VideoBrowser.ets                          // 视频查看页面
└── utils //工具类
    ├── AbilityUtils.ts
    ├── AlbumUtil.ts
    ├── DateUtil.ts
    ├── DialogUtil.ts
    ├── hisysEventUtil.ts
    ├── ImageUtil.ts
    ├── Log.ts
    ├── MathUtils.ts
    ├── ResourceUtils.ts
    ├── SingleInstanceUtils.ts
    └── UiUtil.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

具体实现

在base模块中通过封装photoAccessHelper向外提供功能接口，如Album查询操作

如效果预览中的相册列表：在AlbumSetPage.ets 中调用AlbumDataImpl.reloadAlbumItemData()；

在base模块中通过封装photoAccessHelper向外提供功能接口

如新建相册：在AlbumSetPage.ets 中调用userFileModel.createAlbum()；
如删除图片：在BatchDeleteMenuOperation.ets 中调用userFileModel.deleteOne()；
如恢复图片：在TrashUserFileDataItem.ets 中调用userFileModel.recover()；
如永久删除图片：在TrashUserFileDataItem.ets
中调用userFileModel.permanentDelete()；
如删除相册：在AlbumDataItem.ets 中调用userFileModel.deleteAlbum()；

约束与限制

1.本示例仅支持标准系统上运行，支持设备：RK3568。

2.本示例为Stage模型，支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。需要配置"apl":"system_basic"才可安装成功；

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo FileManagement/Photos/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
1
2
3
4
5