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

个人首页： 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之间的相互套用

实现

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

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，与标签拉开距离，提升可读性。

案例代码

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})
        }
      }

总结

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