OpenHarmony实战开发-使用一次开发多端部署实现一多音乐典型场景

介绍

本示例展示了音乐"推荐"与"我的歌单" 两个Tab页签内容。

• 推荐：采用栅格组件、List组件、Grid组件根据窗口断点进行自适应布局。
• 我的歌单：通过使用Grid组件实现网格布局与列表布局相互切换。

本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，主要通过组件提供窗口断点事件，保证应用在不同设备或不同窗口尺寸下可以正常显示。

预览效果

本示例在预览器中的效果：

• 推荐页
  
• 我的歌单
  
  使用说明：

1.打开首页，在IDE编辑器中打开预览器查看预览效果。
2.在预览器中开启窗口拖拽模式，拖动窗口变化，可以查看组件的响应式变化，如下图所示：

3.手动自由拖拽窗口，将应用窗口在sm/md/lg三种设备形态下进行切换并查看预览效果。

工程目录

MultiMusic/entry/src/main/ets/
|---model
|   |---DataSummary.ets                    // 数据集合
|   |---DataType.ets                       // 数据类型
|---pages