【HarmonyOS鸿蒙Next第一课“营”在暑期：Codelabs挑战赛+音乐专辑】- lakeview

【HarmonyOS鸿蒙Next第一课“营”在暑期：Codelabs挑战赛+音乐专辑】- lakeview 需求：基于自适应布局和响应式布局，实现一次开发，多端部署音乐专辑，并成功完成展现音乐列表页的实现。

过程：经过看视频、查文档，决定使用List容器组件展示音乐列表，使用GridRow和GridCol实现动态响应布局

代码已上传gitee，地址是：https://gitee.com/lakeview/20230809

实现的效果图如下：

竖屏：

横屏：

代码实现细节：代码细节包括三个地方，1是自适应、2是列表生成页、3是使用相对布局设置两边对齐，下面分别介绍一下。

1. 自适应框架大致如下：

提前预置不同屏幕的栅格数量，调用onBreakpointChange实现不同断点下布局的响应。

具体代码如下：

1. 列表生成页

调用ForEach函数循环预先设置的数组，展示音乐列表，具体代码如下：

3 两边对齐

针对底部区域，左边展示正在播放的歌曲、歌手等信息，右边展示播放暂停等按钮，调用RelativeContainer，设置锚点实现两边对齐。

具体代码如下：

心得：经过该Demo的实践，了解并学习了页面UI的搭建，GridRow和GridCol组件的使用，虽然页面有些简陋、代码有些生涩，宝贵的是从中获取了知识，对ArkTs有了更进一步的了解。