鸿蒙音频播放器第五弹:从单曲到专辑,List组件案例
- 2026-01-31 11:13:33
鸿蒙音频播放器第五弹:从单曲到专辑,List组件案例今天e智音频播放器升级到了v1.0.6版本，在新版本我们实现了一个完整可交互的播放列表功能。 完整功能演示在此：播放列表功能演示1.0.6 
该功能的实现，主要用到鸿蒙的List组件 列表几个注意点： 1. 通过layoutWeight(1)属性，让中间部分自适应宽度 2. 通过条件(if)，只在播放时长设置时，显示播放时长信息 3. 当前播放的歌曲用不同背景色(#F0F8FF)区分 
一、列表：
1. 单击播放：列表中的任何歌曲，单击开始播放。
2. 状态反馈：正在播放的歌曲高亮显示。
3. 智能滚动：列表可滚动，自动显示滚动条。
List组件的代码：
// v1.0.6 播放列表 - 使用List组件支持滚动List({ space: 8, scroller: this.scroller }) {ForEach(this.audioList, (item: AudioFile, index: number) => {ListItem() {// 每首歌曲的展示行Row({ space: 15 }) {// 左侧：播放状态图标// 中间：歌曲信息// 右侧：时长显示}.onDoubleClick(() => {this.playAudioByIndex(index); // 双击播放！})}})}.height(180) // 固定高度.scrollBar(BarState.Auto) // 自动滚动条
二、定义音频文件的数据结构 - Interface
在实现歌曲列表的填充前，我们需要先定义在我们音频播放器里面，“一首歌”包含哪些属性：
// v1.0.6 音频文件信息接口interfaceAudioFile {id: string; // 唯一标识name: string; // 显示名称（用户看到的）fileName: string; // 实际文件名（rawfile中的）duration?: number; // 时长（秒）- 可选字段}
如代码所示，我们包含了ID，名称，文件名（rowfile文件夹里面的），以及可选属性音频长度。使用Interface有如下几点：
类型安全：ArkTS会自动检查字段是否正确；
代码提示：DevEcoStudio会进行智能补全；
易于扩展：新增字段不影响现有代码；
结构清晰：明确知道音频对象包含哪些属性；
三、初始化音频文件列表
// v1.0.6 播放列表相关状态@State audioList: AudioFile[] = [{ id: '1', name: '将进酒', fileName: 'qiangjinjiu.mp4' },{ id: '2', name: '声声慢', fileName: 'shengshengman.m4a' },{ id: '3', name: '苟活', fileName: 'gouhuo.mp3' },{ id: '4', name: '簪花入梦', fileName: 'zanhuarumeng.mp3' },{ id: '5', name: '踢踏舞', fileName: 'tita.mp3' },{ id: '6', name: '李白', fileName: 'libai.mp3' },{ id: '7', name: '新年好', fileName: 'xnh.mp3' },{ id: '8', name: '大海啊故乡', fileName: 'dahai.m4a' }];
注意：
文件格式支持：列表中包含了多种音频格式（.mp4、.m4a、.mp3），鸿蒙AVPlayer支持这些常见格式
文件存放位置：务必确保这些文件都放置在项目的
resources/rawfile/目录下文件名一致：
fileName字段必须与实际文件名完全一致，包括大小写文件大小：实际音频文件大小可能不同，需注意存储空间
播放顺序：列表顺序决定界面默认显示顺序
ID唯一性：每个音频文件的id需保持唯一，便于列表项识别和更新
这个列表包含古典诗词、现代歌曲等多种风格的音频，可以很好地展示播放器的功能多样性。
三、List组件 - 渲染
List的基本机构
List({space: 8 // 列表项间距}) {// 列表内容区}
ForEach渲染列表项
ForEach(this.audioList, (item: AudioFile, index: number) => {ListItem() {// 每个列表项的UI}}, (item: AudioFile) => item.id) // 关键：唯一key
重要提示：ForEach的第三个参数是key生成函数，必须提供！用于识别哪些项需要重新渲染，可以极大提升性能。
列表项UI设计
每个列表项包括一个标记该视频文件是否处于播放状态的图标，歌曲名称，播放状态，播放时长（可选）。
Row({ space: 15 }) {// 1. 状态图标（播放中/普通）Image(this.currentAudioIndex === index &&this.playerState === PlayerState.PLAYING ?$r('app.media.playing_icon') :$r('app.media.music_icon'))// 2. 歌曲信息（用Column纵向布局）Column({ space: 3 }) {Text(item.name) // 歌曲名if (this.currentAudioIndex === index) {Text(this.getPlayStatusText()) // 播放状态}}.layoutWeight(1) // 关键：占满剩余空间// 3. 时长显示if (item.duration) {Text(this.formatTime(item.duration))}}.backgroundColor(this.currentAudioIndex === index ? '#F0F8FF' : '#FFFFFF')
四、List组件 -滚动条
.scrollBar(BarState.Auto) // 自动显示滚动条.scrollBarColor('#409EFF') // 滚动条颜色.edgeEffect(EdgeEffect.Spring) // 滚动边缘效果
滚动条相关的设置，自动显示滚动条，只有在滚动（拖动）列表的时候，滚动条显示出来，也可以改成on（一直显示）或者off（不显示）。
五、播放交互
当单击某条记录，也就是某首歌，或者说某个音频文件时，则启动播放该文件。
.onClick(() => {// 单击：选中歌曲this.currentAudioIndex = index;// 双击：播放歌曲this.playAudioByIndex(index);})
当某首歌播放时，修改对应的显示样式，播放的图标，背景色以及字体颜色。如下图，正在播放”声声慢“，则显示播放图标，字体为蓝色，背景色为浅蓝色：
代码：
// 当前播放项高亮.backgroundColor(this.currentAudioIndex === index ?'#F0F8FF' : '#FFFFFF')// 当前播放项文字颜色.fontColor(this.currentAudioIndex === index ?'#409EFF' : '#333')
六、主要修改点总结
AudioFile接口 | ||
| 歌曲选择 | 只能播固定文件-》列表任意选择 |
实现播放列表后，我们就可以接着实现顺序播放和随机播放两个功能了，敬请期待。
（当前还有些缺陷，暂时先不改，优先把主要功能实现了）
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
