双非大学生自学鸿蒙5.0零基础入门到项目实战 - 歌曲列表

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 文章所属专栏：鸿蒙5.0零基础入门到项目实战

前言

通过前面基础内容的学习，现在我们通过一个小案例来测试一下，这里我用的是网易云的一个歌曲样式，大家可以用我这个，当然可以自己去随便找一个类似的，案例中可能会用到上一篇没有的知识点，大家也不用担心，我会一点一点给大家进行代码分析

实践

为了和前面的只是做区分，我这里新建了一个页面，大家可以像我这样新建页面，这样系统会自动识别。

准备工作

一定要检查下json文件中有没有页面信息，如果没有手动添加一下即可

设计案例

我这里简单分析一下，不知道大家能不能看懂，就是Column和Row之间的相互套用

实现

在实现这一案例之前要先把我们用到的素材准备好，这里给大家推荐一个好用的素材库

iconfont

下载的时候一定要去下载svg格式，鸿蒙可以对svg格式的图片进行颜色的修改

这里一定要记好图片的位置，不要将位置搞错了

为了让结果更加明显，我这里用了横屏，这里整体是列表样式，复用了多个子组件使得效果更加明显

代码解析

核心功能是展示一个包含10条相同布局列表项的音乐类列表页面

一、核心功能与页面定位

代码实现了一个垂直排列的列表页面，每个列表项对应一条音乐信息，整体风格偏向音乐类App的“我的收藏”或“推荐歌曲”列表。

• 数据层面：当前为静态数据，所有列表项内容完全一致（歌曲名、歌手、图标等）。
• 交互层面：仅实现UI展示，未添加点击、滑动等交互逻辑（如点击播放、长按操作）。

二、代码结构分层解析

页面采用“Column（根容器）→ List（列表）→ ListItem（列表项）→ Row（横向布局） ”的嵌套结构，每层职责明确，符合ArkUI布局的“容器嵌套”设计思路。

1. 根容器：Column

• 作为页面最外层容器，采用垂直布局，仅包裹一个List组件。
• 设置width: '100%'，确保页面宽度占满屏幕，符合移动端全屏布局习惯。

2. 列表容器：List + ListItem

• List：负责实现垂直滚动列表，自动处理超出屏幕内容的滚动逻辑，无需手动编写滚动代码。
• ListItem：共10个，每个对应一条列表项，是List的必选子组件，用于定义单条数据的UI结构。

3. 列表项核心：Row（横向布局）

每个ListItem内部仅包含一个Row，该Row是列表项的核心，横向排列3个关键区域，结构如下：

区域位置	组件/布局	功能描述	关键属性
左侧	Image	展示歌曲封面图	height: 100（固定高度）、border({radius:8})（圆角）、左右边距10
中间	Column	展示文字信息（歌曲名、标签、歌手）	layoutWeight: 1（关键属性，占满剩余宽度，避免右侧图标挤压文字）
右侧	Row	展示3个功能图标（如收藏、分享、更多）	每个图标宽30，固定边距，填充色#abaeb7（灰色，未激活状态）

三、关键细节与属性说明

代码中部分属性是实现UI效果的核心，需重点关注：

1. 布局权重：layoutWeight

• 仅作用于Column（中间文字区域），值为1。
• 功能：在父容器Row中，让中间文字区域占据“左侧图片+右侧图标”之外的所有剩余宽度，确保文字不会因屏幕尺寸变化而被截断，适配不同宽度的设备。

2. 样式属性：背景、边框、边距

• backgroundColor: '#ffffff'：给每个列表项设置白色背景，与页面默认的浅灰背景区分，形成“卡片式”效果，提升视觉层次感。
• border({radius: 8})：2处使用（封面图、“超清母带”标签），通过圆角弱化尖锐边缘，符合现代UI设计的“柔和风格”。
• margin：多层级使用（如列表项底部边距15、图标左右边距15），控制组件间的间距，避免UI拥挤。

3. 文字样式：字体、颜色、权重

• 歌曲名（Black Veil Bride）：fontSize:18、fontWeight:500（中等加粗），突出核心信息。
• “超清母带”标签：fontSize:12、边框+文字同色（#ebd6a9），用小字体和浅色标签区分次要信息。
• 歌手名（Rosy赵露思）：fontSize:15，左 margin 10，与标签拉开距离，提升可读性。

案例代码

ListItem(){Row(){Image($r('app.media.my'))// 左侧图片.height(100).margin({left:10,right:10}).border({radius:8})Column(){ // 中间文字Text('Black Veil Bride').fontWeight(500).fontSize(18).width('100%').margin({bottom:15,top:10})Row(){Text('超清母带').fontSize(12).border({radius:3,width:1,color:'#ebd6a9'}).margin(3).fontColor('#ebd6a9')Text('Rosy赵露思').fontSize(15).margin({left:10})}.margin({bottom:10,top:10}).width('100%')}.layoutWeight(1).height(80)Row(){Image($r('app.media.ic_01')).width(30).fillColor('#abaeb7').margin({left:15,right:10})Image($r('app.media.ic_02')).width(30).fillColor('#abaeb7').margin({left:15,right:10})Image($r('app.media.ic_03')).width(30).fillColor('#abaeb7').margin({left:15,right:10})}}.backgroundColor('#ffffff').width('100%').margin({bottom:15})}}

总结

这里只是实现了静态的歌曲列表，后期可以改造成一个可复用的音乐列表组件 + 动态数据循环版本，可以将数据实现动态话，组件可以抽取出来提升复用性