HarmonyOS NEXT应用开发—折叠屏音乐播放器方案

介绍

本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。

效果图预览

使用说明

  1. 播放器预加载了歌曲,支持播放、暂停、重新播放,在折叠屏上,支持横屏悬停态下的组件自适应动态变更。

实现思路

  1. 采用MVVM模式进行架构设计,目录结构中区分展示层、模型层、控制层,展示层通过控制层与模型层沟通,展示层的状态数据与控制层进行双向绑定,模型层的变更通过回调形式通知给控制层,并最终作用于展示层。

  2. 在可折叠设备上使用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. 在需要移动到上屏的子组件上添加属性动效,当组件属性发生变更时,达成动态展示效果。

    Image(this.musicModel.cover)
    .width(this.curImgSize)
    .height(this.curImgSize)
    .margin(20)
    .animation(this.attrAniCfg)
    .interpolation(ImageInterpolation.High)
    .draggable(false)

  4. 折叠屏设备上,依赖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模块

参考资料

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

相关推荐
irving同学462388 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程11 分钟前
你真的了解 Map、Set 嘛
前端
崔璨15 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv15 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
2501_9159184120 分钟前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
IT_陈寒27 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
lichong95127 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
Android出海30 分钟前
Android 15重磅升级:16KB内存页机制详解与适配指南
android·人工智能·新媒体运营·产品运营·内容运营
一只修仙的猿35 分钟前
毕业三年后,我离职了
android·面试
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端