• Home
Name Date Size #Lines LOC

..--

AppScope/22-Oct-2025-3432

entry/22-Oct-2025-21,55218,690

hvigor/22-Oct-2025-1919

screenshots/22-Oct-2025-

.gitignoreD22-Oct-2025119 1111

README_zh.mdD22-Oct-202510.1 KiB217192

build-profile.json5D22-Oct-20251.1 KiB4342

hvigorfile.tsD22-Oct-2025159 21

oh-package.json5D22-Oct-2025870 2827

ohosTest.mdD22-Oct-20252 KiB2018

README_zh.md

1# 相册
2
3### 介绍
4
5本示例主要展示了相册相关的功能，使用[@ohos.file.photoAccessHelper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper-sys.md)
6接口，实现了查看系统相册、创建用户相册、查看相册照片、用户相册文件添加和删除、以及预览图片、最近删除、收藏夹操作等功能;
7
8### 效果预览
9
10| 主页                              | 图片列表                              | 大图                                | 图片选择                                |
11|---------------------------------|-----------------------------------|-----------------------------------|-------------------------------------|
12| ![image](screenshots/home.jpeg) | ![image](screenshots/photos.jpeg) | ![image](screenshots/detail.jpeg) | ![image](screenshots/selector.jpeg) |
13
14使用说明
15
161. 主界面：查询显示所有照片、系统相册（相机/视频/截屏录屏/动态照片/我的收藏/最近删除）、用户相册。其中相机和截屏录屏系统相册已经废弃。
172. 主界面点击“+”，创建用户相册
183. 创建用户相册时添加图片到用户相册
194. 长按用户相册，删除相册
205. 长按用户相册，重命名相册（不可重名）
216. 长按用户相册，相册多选，批量删除
227. 点击相册，查看相册中的图片列表
238. 点击图片，查看单个图片大图
249. 点击心形图标，收藏图片
2510. 点击心形图标，取消收藏
2611. 大图界面，重命名文件（可重名）
2712. 大图界面，删除文件（移动到最近删除相册）
2813. 从最近删除恢复照片
2914. 点击视频，查看视频并播放
3015. 点击图片页面右上角叹号，查看图片详情
3116. 长按图片批量操作：多选/全选、删除、恢复
3217. 用户相册内图片列表界面点击“+”，从已有相册添加照片
3318. 长按图片列表图片，更多菜单，从图片选择添加到已有相册
3419. 在相册图片列表界面，长按图片，选择图片，点击更多，可以将图片加入到其他相册（可多选）
3520. 在用户相册图片列表界面，长按图片，选择图片，点击更多，可以将图片从当前相册移除（可多选）
3621. 在用户相册图片列表界面，长按图片，选择图片，点击更多，可以查看图片详情（可多选）
3722. 点击视频，视频界面，点击转码图标，转码视频
38
39### 工程目录
40
41```
42.
43├── base // @ohos.file.photoAccessHelper接口封装
44│   ├── FavorUserFileDataItem.ts            // 收藏夹图片数据类
45│   ├── InnerUserFileDataItem.ts            // 大图数据类
46│   ├── TrashUserFileDataItemCache.ts       // 最近删除图片数据缓存
47│   ├── TrashUserFileDataItem.ts            // 最近删除图片数据类
48│   ├── UserFileDataChangeCallback.ts       // 图片数据变化回调
49│   ├── UserFileDataHelper.ts               // 图片展示信息查询接口
50│   ├── UserFileDataItemCache.ts            // 图片数据缓存
51│   ├── UserFileDataItem.ts                 // 图片数据类
52│   ├── UserFileModel.ts                    // photoAccessHelper接口封装
53│   ├── UserFileObserverCallback.ts         // 图片数据监听回调
54│   └── UserFileObserver.ts                 // 图片数据监听类
55├── common //业务逻辑
56│   ├── ActionBarProp.ts
57│   ├── AlbumDataImpl.ts                    // 相册数据查询接口封装
58│   ├── AlbumDataItem.ts                    // 相册数据类
59│   ├── AlbumsDataSource.ts
60│   ├── BroadcastManager.ts
61│   ├── Broadcast.ts
62│   ├── CommonObserverCallback.ts
63│   ├── EventPipeline.ts
64│   ├── GlobalContext.ts
65│   ├── GroupDataImpl.ts                    // 相册成员数组数据接口封装
66│   ├── GroupItemDataSource.ts              // 相册成员数组数据
67│   ├── ItemDataSource.ts
68│   ├── MultimodalInputManager.ts
69│   ├── ScreenManager.ts                    // 屏幕显示逻辑
70│   ├── SelectManager.ts                    // 选择状态逻辑
71│   └── SimpleAlbumDataItem.ts              // 简化相册数据类
72├── components // UI组件
73│   ├── ActionBarButton.ets
74│   ├── ActionBar.ets
75│   ├── AddNotesDialog.ets
76│   ├── AlbumGridItemNewStyle.ets
77│   ├── AlbumListCard.ets
78│   ├── AlbumScrollBar.ets
79│   ├── AlbumSelectGridItemNewStyle.ets
80│   ├── AlbumSetPage.ets
81│   ├── CancelOperationDialog.ets
82│   ├── CustomDialogView.ets
83│   ├── DeleteDialog.ets
84│   ├── DeleteProgressDialog.ets
85│   ├── DetailMenuPanel.ets
86│   ├── DetailsDialog.ets
87│   ├── DetailTitle.ets
88│   ├── EmptyAlbumComponent.ets
89│   ├── FindSameNameDialog.ets
90│   ├── GridScrollBar.ets
91│   ├── ImageGridItemComponent.ets
92│   ├── LoadingPanel.ets
93│   ├── MediaOperationActionBar.ets
94│   ├── MultiSelectDialog.ets
95│   ├── NewAlbumDialog.ets
96│   ├── NoPhotoComponent.ets
97│   ├── NoPhotoIndexComponent.ets
98│   ├── PhotoBrowserActionBar.ets
99│   ├── PhotoBrowserBg.ets
100│   ├── PhotoItem.ets
101│   ├── PhotoSwiper.ets
102│   ├── ProgressDialog.ets
103│   ├── RenameDialog.ets
104│   ├── SaveDialog.ets
105│   ├── SaveImageDialog.ets
106│   ├── SelectionTitle.ets
107│   ├── SingleTitle.ets
108│   ├── ToolBarButton.ets
109│   ├── ToolBar.ets
110│   └── VideoIcon.ets
111├── constants // 常量
112│   ├── AnimationConstants.ts
113│   ├── BroadcastConstants.ts
114│   ├── BrowserConstants.ts
115│   ├── Constants.ts
116│   ├── MediaConstants.ts
117│   ├── QueryConstants.ts
118│   └── RouterConstants.ts
119├── entryability // HAP入口
120│   └── EntryAbility.ts
121├── menus // 菜单操作
122│   ├── AlbumSetDeleteMenuOperation.ts
123│   ├── AlbumSetNewMenuOperation.ts
124│   ├── AlbumSetRenameMenuOperation.ts
125│   ├── AsyncCallback.ts
126│   ├── BatchDeleteMenuOperation.ts
127│   ├── BatchRecoverMenuOperation.ts
128│   ├── BatchRemoveMenuOperation.ts
129│   ├── ClearRecycleMenuOperation.ts
130│   ├── GotoPhotosMenuOperation.ts
131│   ├── MenuContext.ts
132│   ├── MenuOperationCallback.ts
133│   ├── MenuOperation.ts
134│   ├── MoveMenuOperation.ets
135│   ├── ProcessMenuOperation.ts
136│   ├── RenameMenuOperation.ts
137├── models // 类型定义
138│   ├── ActionBarMode.ts
139│   ├── Action.ts
140│   ├── AlbumBarModel.ts
141│   ├── AlbumSelectBarModel.ts
142│   ├── JumpSourceToMain.ts
143│   ├── MediaOperationType.ts
144│   ├── NewAlbumBarModel.ts
145│   ├── PhotoGridBarModel.ts
146│   ├── ThumbnailModel.ts
147│   └── ViewType.ts
148├── pages // 页面
149│   ├── AlbumSelect.ets                           // 相册选择页面
150│   ├── Index.ets                                 // 主页面
151│   ├── MediaOperationPage.ets                    // 图片文件操作页面
152│   ├── NewAlbumPage.ets                          // 新建相册页面
153│   ├── PhotoBrowser.ets                          // 大图展示页面
154│   ├── PhotoGridPage.ets                         // 图片列表页面
155│   ├── SelectPhotoBrowser.ets                    // 图片选择页面
156│   └── VideoBrowser.ets                          // 视频查看页面
157└── utils // 工具类
158    ├── AbilityUtils.ts
159    ├── AlbumUtil.ts
160    ├── DateUtil.ts
161    ├── DialogUtil.ts
162    ├── hisysEventUtil.ts
163    ├── ImageUtil.ts
164    ├── Log.ts
165    ├── MathUtils.ts
166    ├── ResourceUtils.ts
167    ├── SingleInstanceUtils.ts
168    └── UiUtil.ts
169
170```
171
172### 具体实现
173
174在base模块中通过封装photoAccessHelper向外提供功能接口，如Album查询操作，源码参考：[AlbumDataImpl.ts](entry/src/main/ets/common/AlbumDataImpl.ts)
175
176* 如效果预览中的**相册列表**：在[AlbumSetPage.ets](entry/src/main/ets/components/AlbumSetPage.ets)
177  中调用AlbumDataImpl.reloadAlbumItemData()；
178
179在base模块中通过封装photoAccessHelper向外提供功能接口，源码参考：[UserFileModel.ts](entry/src/main/ets/base/UserFileModel.ts)
180
181* 如**新建相册**：在[AlbumSetPage.ets](entry/src/main/ets/components/AlbumSetPage.ets)
182  中调用userFileModel.createAlbum()；
183* 如**删除图片**：在[BatchDeleteMenuOperation.ets](entry/src/main/ets/menus/MoveMenuOperation.ets)
184  中调用userFileModel.deleteOne()；
185* 如**恢复图片**：在[TrashUserFileDataItem.ets](entry/src/main/ets/base/TrashUserFileDataItem.ts)
186  中调用userFileModel.recover()；
187* 如**永久删除图片**：在[TrashUserFileDataItem.ets](entry/src/main/ets/base/TrashUserFileDataItem.ts)
188  中调用userFileModel.permanentDelete()；
189* 如**删除相册**：在[AlbumDataItem.ets](entry/src/main/ets/common/AlbumDataItem.ts)
190  中调用userFileModel.deleteAlbum()；
191
192### 相关权限
193
194[ohos.permission.WRITE_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md#ohospermissionwrite_imagevideo)
195
196[ohos.permission.READ_IMAGEVIDEO](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md#ohospermissionread_imagevideo)
197
198### 约束与限制
199
2001. 本示例仅支持标准系统上运行，支持设备：RK3568。
201
2022. 本示例为Stage模型，支持API15版本SDK，SDK版本号(API Version 15 5.0.3.130),镜像版本号(5.0.3.130)
203
2043. 本示例需要使用DevEco Studio NEXT Release 版本号(Build Version: 5.0.3.900)及以上版本才可编译运行。需要配置"apl":"system_basic"才可安装成功；
205
206### 下载
207
208如需单独下载本工程，执行如下命令：
209
210```
211git init
212git config core.sparsecheckout true
213echo code/SystemFeature/FileManagement/Photos/ > .git/info/sparse-checkout
214git remote add origin https://gitee.com/openharmony/applications_app_samples.git
215git pull origin master
216```
217