介绍
本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。
效果图预览
使用说明
- 播放器预加载了歌曲，支持播放、暂停、重新播放，在折叠屏上，支持横屏悬停态下的组件自适应动态变更。
实现思路
- 采用MVVM模式进行架构设计，目录结构中区分展示层、模型层、控制层，展示层通过控制层与模型层沟通，展示层的状态数据与控制层进行双向绑定，模型层的变更通过回调形式通知给控制层，并最终作用于展示层。
- 在可折叠设备上使用FolderStack组件作为容器组件，承载播放器的所有功能组件，在半折叠态上，使需要移动到上屏的子组件产生相应的动态效果。
// TODO：知识点：FolderStack继承于Stack控件，通过upperItems字段识别指定id的组件，自动避让折叠屏折痕区后移到上半屏
FolderStack({ upperItems: [CommonConstants.FOLDER_STACK_UP_COMP_ID] }) {
MusicPlayerInfoComp({ musicModel: this.musicModel, curFoldStatus: this.curFoldStatus })
.id(CommonConstants.FOLDER_STACK_UP_COMP_ID)
MusicPlayerCtrlComp({ musicModel: this.musicModel })
}
- 在需要移动到上屏的子组件上添加属性动效，当组件属性发生变更时，达成动态展示效果。
Image(this.musicModel.cover)
.width(this.curImgSize)
.height(this.curImgSize)
.margin(20)
.animation(this.attrAniCfg)
.interpolation(ImageInterpolation.High)
.draggable(false)
- 折叠屏设备上，依赖display的屏幕状态事件，监听屏幕折叠状态变更，通过对折叠状态的分析，更新UI属性。
display.on('foldStatusChange', (curFoldStatus: display.FoldStatus) => {
this.curFoldStatus = curFoldStatus;
this.windowModel.updateMainWinPreferredOrientation(curFoldStatus);
})
高性能知识点
暂无
工程结构&模块类型
foldablescreencases // har类型
|---common
| |---constants
| | |---CommonConstants.ets // 通用常量
| | |---SysCapConstants.ets // 系统能力常量
|---components
| |---MusicPlayerCtrlComp.ets // 自定义组件-音乐播放器控制栏
| |---MusicPlayerInfoComp.ets // 自定义组件-音乐播放器歌曲详情展示
|---model
| |---AVPlayerModel.ets // 模型层-音频播放管理器
| |---MusicModel.ets // 模型层-音乐歌曲数据模型
| |---SysCapModel.ets // 模型层-系统能力管理器
| |---WindowModel.ets // 模型层-窗口管理器
|---pages
| |---MusicPlayerPage.ets // 展示层-音乐播放器
|---viewmodel
| |---MusicPlayerViewModel.ets // 控制层-音乐播放器控制器
模块依赖
依赖本地的utils模块
参考资料
详细关注VX公众号：Android老皮
《鸿蒙（HarmonyOS）开发学习指南》
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用（Stage模型）
3、构建第一个ArkTS应用（FA模型）
4、构建第一个JS应用（FA模型）
5、........
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件（Stage模型）
3、应用配置文件概述（FA模型）
4、.......
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、.......
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、......
第五章 UI开发
1.方舟开发框架（ArkUI）概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4.......
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7.......
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17......
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4.......
