介绍
本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。
效果图预览
使用说明
1.播放器预加载了歌曲,支持播放、暂停、重新播放,在折叠屏上,支持横屏悬停态下的组件自适应动态变更。
实现思路
- 采用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 })
}
3.在需要移动到上屏的子组件上添加属性动效,当组件属性发生变更时&#x