• Home
Name Date Size #Lines LOC

..--

AppScope/16-Dec-2024-3432

entry/16-Dec-2024-20,88218,082

hvigor/16-Dec-2024-88

screenshots/16-Dec-2024-

.gitignoreD16-Dec-2024119 1111

README_zh.mdD16-Dec-202410 KiB216191

build-profile.json5D16-Dec-20241.1 KiB4342

hvigorfile.tsD16-Dec-2024159 21

hvigorwD16-Dec-20241.4 KiB4928

hvigorw.batD16-Dec-20241.5 KiB6547

oh-package.json5D16-Dec-2024235 1312

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