一多开发实例（音乐）-一次开发，多端部署-HarmonyOS特征-最佳实践 - 华为HarmonyOS开发者 (huawei.com)

一多开发实例（音乐）概述

本文将介绍如何将“一次开发，多端部署”应用到音乐播放器的实际开发过程中。音乐播放器是现在较为流行的大众娱乐应用，本文用作示例的音乐应用主要展示播放页在手机、折叠屏、平板和2in1四种产品形态上的“一次开发，多端部署”，在保障基本用户体验的同时，根据不同产品形态特性，适配相应的浏览和交互功能。下文将以架构设计、UX设计和页面开发三个章节来介绍“一多”音乐播放器在开发过程中的最佳实践。

说明

阅读本文前，读者需熟悉方舟开发框架（ArkUI框架）和页面开发的“一多”能力。下文将详细介绍它们在“一多”开发实践中如何使用。

架构设计

HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。更多详细请参考指南分层架构设计的逻辑设计。

UX设计

音乐应用以播放页为重点进行介绍。

页面开发

本章介绍音乐应用如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。下文将以音乐播放器的播放页为例，一一介绍具体实现方案，帮助开发者快速实现音乐应用的“一多”开发。

播放页

播放页是音乐应用最主要的功能页面，主要用于播放音乐。播放页最终在三种设备上的显示效果图如下：

示意图

sm

md

lg

效果图

播放页主要包含播控区域以及歌词区域，在sm断点下通过Tab组件或者Swiper组件切换播控区域以及歌词区域，在md以及lg断点下播控区域以及歌词区域左右两列展示。
sm断点下使用Stack组件是区域1显示在Swiper组件上，区域2、3、4作为沿垂直方向布局的Column组件的子组件，在区域3以及区域4之间使用Blank组件填充空白区域。
在md断点下播控区域与歌词区域通过GridRow组件GridCol组件实现，GridRow设置总栅格数为8，每个Gridcol分别占4个栅格。

在lg断点下GridRow设置总栅格数为12，播控区域占4个栅格，GridCol设置offset为1，歌词区域占6个栅格，设置offset为1。

区域编号	简介	实现方案
1	标题区	Row组件的justifyContent属性设置为FlexAlign.SpaceBetween实现均分能力，代码可参考一多开发实例（长视频）。
2	专辑封面	Image组件设置aspectRatio属性为1使图片宽高相等。
3	歌曲信息	Column组件沿垂直方向布局展示两行文本。
4	播控区域	使用Slider组件实现进度条。
5	歌词区域	Canvas结合动画实现歌词滚动效果。
6	桌面歌词按钮	Image组件显示歌词图片。

如果开发者需要阅读完整代码，详情可参考一次开发，多端部署-音乐专辑。

ITPub博客

【最佳实践】一多开发实例（音乐）

一多开发实例（音乐）-一次开发，多端部署-HarmonyOS特征-最佳实践 - 华为HarmonyOS开发者 (huawei.com)

一多开发实例（音乐）概述

架构设计

UX设计

页面开发

播放页

最新文章