OpenHarmony实战开发-如何实现折叠屏设备中音乐播放器场景。

最新推荐文章于 2024-08-20 23:52:59 发布

码牛程序猿

最新推荐文章于 2024-08-20 23:52:59 发布

阅读量843

点赞数 19

分类专栏：鸿蒙鸿蒙工程师 HarmonyOS 文章标签： harmonyos 鸿蒙应用开发 OpenHarmony 华为鸿蒙 HarmonyOS 鸿蒙开发

本文链接：https://blog.csdn.net/2401_82546228/article/details/137841086

版权

介绍

本示例介绍使用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 })
}