鸿蒙5.0&next开发【页面开发：音乐专辑页】一次开发多端部署
音乐专辑页
本小节将以音乐专辑页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
页面设计
音乐专辑页的页面设计如下。
同样观察音乐专辑的页面设计，不同断点下的页面设计有较多相似的地方。
据此，我们可以将页面分拆为多个组成部分。
- 标题栏
- 歌单封面
- 歌单列表
- 播放控制栏
标题栏
不同断点下，标题栏始终只显示“返回按钮”、“歌单”以及“更多按钮”，但“歌单”与“更多按钮”之间的间距不同。由于不同断点下标题栏的背景色也有较大差异，因此无法使用拉伸能力实现，此场景更适合使用栅格实现。我们可以将标题栏划分为“返回按钮及歌单”和“更多按钮”两部分，这两部分在不同断点下占据的列数如下图所示。另外，还可以借助OnBreakpointChange事件，调整不同断点下这两部分的背景色。
歌单封面
歌单封面由封面图片、歌单介绍及常用操作三部分组成，这三部分的布局在md和lg断点下完全相同，但在sm断点下有较大差异。此场景同样可以用栅格实现。
歌单列表
不同断点下，歌单列表的样式基本一致，但sm和md断点下是歌单列表是单列显示，lg断点下是双列显示。可以通过[List组件]的lanes属性实现这一效果。
播放控制栏
在不同断点下，播放控制栏显示的内容完全一致，唯一的区别是歌曲信息与播放控制按钮之间的间距有差异，这是典型的拉伸能力的使用场景。
运行效果
将页面中的四部分组合在一起，即可显示完整的页面。
其中歌单封面和歌单列表这两部分的相对位置，在sm断点下是上下排布，在md和lg断点下是左右排布，也可以用栅格来实现目标效果。
最后将页面各部分组合在一起即可。
音乐专辑页面的运行效果如下所示。
原文作者：是秃子总会反光；如有侵权，请联系管理员删除。
