-
个人首页： VON
-
鸿蒙系列专栏： 鸿蒙开发小型案例总结
-
综合案例 ：鸿蒙综合案例开发
-
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
-
文章所属专栏：鸿蒙5.0零基础入门到项目实战
歌曲列表
- 前言
- 实践
- 代码解析
-
-
- 一、核心功能与页面定位
- 二、代码结构分层解析
-
- [1. 根容器：Column](#1. 根容器：Column)
- [2. 列表容器：List + ListItem](#2. 列表容器：List + ListItem)
- [3. 列表项核心：Row（横向布局）](#3. 列表项核心：Row（横向布局）)
- 三、关键细节与属性说明
-
- [1. 布局权重：layoutWeight](#1. 布局权重：layoutWeight)
- [2. 样式属性：背景、边框、边距](#2. 样式属性：背景、边框、边距)
- [3. 文字样式：字体、颜色、权重](#3. 文字样式：字体、颜色、权重)
-
- 案例代码
- 总结
前言
通过前面基础内容的学习，现在我们通过一个小案例来测试一下，这里我用的是网易云的一个歌曲样式，大家可以用我这个，当然可以自己去随便找一个类似的，案例中可能会用到上一篇没有的知识点，大家也不用担心，我会一点一点给大家进行代码分析
实践
为了和前面的只是做区分，我这里新建了一个页面，大家可以像我这样新建页面，这样系统会自动识别。
准备工作
一定要检查下json文件中有没有页面信息，如果没有手动添加一下即可
设计案例
我这里简单分析一下，不知道大家能不能看懂，就是Column和Row之间的相互套用
实现
在实现这一案例之前要先把我们用到的素材准备好，这里给大家推荐一个好用的素材库
下载的时候一定要去下载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，与标签拉开距离，提升可读性。
案例代码
go
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})
}
}总结
这里只是实现了静态的歌曲列表，后期可以改造成一个可复用的音乐列表组件 + 动态数据循环版本，可以将数据实现动态话，组件可以抽取出来提升复用性