鸿蒙音频播放器第五弹:从单曲到专辑,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) // 自动滚动条

// v1.0.6 音频文件信息接口interfaceAudioFile {id: string;          // 唯一标识name: string;        // 显示名称（用户看到的）fileName: string;    // 实际文件名（rawfile中的）duration?: number;   // 时长（秒）- 可选字段}

// 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' }];

List({     space: 8                    // 列表项间距}) {    // 列表内容区}

ForEach(this.audioList, (item: AudioFile, index: number) => {    ListItem() {        // 每个列表项的UI    }}, (item: AudioFile) => item.id) // 关键：唯一key

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

.scrollBar(BarState.Auto) // 自动显示滚动条.scrollBarColor('#409EFF') // 滚动条颜色.edgeEffect(EdgeEffect.Spring) // 滚动边缘效果

.onClick(() => {    // 单击：选中歌曲    this.currentAudioIndex = index;        // 双击：播放歌曲    this.playAudioByIndex(index);})

// 当前播放项高亮.backgroundColor(this.currentAudioIndex === index ?                  '#F0F8FF' : '#FFFFFF')// 当前播放项文字颜色.fontColor(this.currentAudioIndex === index ?            '#409EFF' : '#333')