目录

案例介绍

本篇文章将介绍如何使用FolderStack组件构建音乐应用中的播放列表基础结构。我们将实现一个按专辑分组的音乐列表，通过合理的数据结构和布局设计，为用户提供清晰的音乐浏览界面。

代码实现

@Entry
@Component
struct MusicPlaylistPage {
  // 音乐数据
  private musicData: Array<{
    albumName: string,
    albumCover: Resource,
    artist: string,
    songs: Array<{
      id: string,
      title: string,
      duration: string,
      isFavorite: boolean
    }>
  }> = [
    {
      albumName: '流行热歌',
      albumCover: $r('app.media.album_cover1'),
      artist: '多位艺术家',
      songs: [
        { id: '1001', title: '星辰大海', duration: '03:45', isFavorite: true },
        { id: '1002', title: '起风了', duration: '05:12', isFavorite: false },
        { id: '1003', title: '光年之外', duration: '04:38', isFavorite: true }
      ]
    },
    {
      albumName: '经典怀旧',
      albumCover: $r('app.media.album_cover2'),
      artist: '多位艺术家',
      songs: [
        { id: '2001', title: '月亮代表我的心', duration: '03:28', isFavorite: true },
        { id: '2002', title: '千千阙歌', duration: '04:15', isFavorite: true }
      ]
    }
  ];

  build() {
    Column() {
      // 应用标题
      Row() {
        Text('我的音乐')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        
        Blank()
        
        Image($r('app.media.ic_search'))
          .width(24)
          .height(24)
          .margin({ right: 16 })
        
        Image($r('app.media.ic_more'))
          .width(24)
          .height(24)
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      .backgroundColor('#FFFFFF')

      // 可滚动的内容区域
      Scroll() {
        Column({ space: 12 }) {
          ForEach(this.musicData, (album) => {
            FolderStack() {
              // 专辑标题
              FolderStackHeader() {
                Row() {
                  Image(album.albumCover)
                    .width(48)
                    .height(48)
                    .borderRadius(4)
                  
                  Column({ space: 4 }) {
                    Text(album.albumName)
                      .fontSize(16)
                      .fontWeight(FontWeight.Medium)
                    
                    Text(album.artist)
                      .fontSize(12)
                      .fontColor('#666666')
                  }
                  .alignItems(HorizontalAlign.Start)
                  .margin({ left: 12 })
                  .layoutWeight(1)
                  
                  Text(`${album.songs.length}首`)
                    .fontSize(14)
                    .fontColor('#666666')
                }
                .width('100%')
                .padding({ left: 16, right: 16 })
              }
              
              // 歌曲列表
              FolderStackContent() {
                Column() {
                  ForEach(album.songs, (song) => {
                    Row() {
                      Text(song.title)
                        .fontSize(14)
                        .layoutWeight(1)
                      
                      Text(song.duration)
                        .fontSize(12)
                        .fontColor('#999999')
                    }
                    .width('100%')
                    .height(48)
                    .padding({ left: 16, right: 16 })
                  })
                }
                .width('100%')
                .backgroundColor('#FFFFFF')
              }
            }
            .width('100%')
            .borderRadius(8)
            .headerBackgroundColor('#FFFFFF')
            .contentBackgroundColor('#FFFFFF')
            .dividerColor('#EEEEEE')
          })
        }
        .width('100%')
        .padding({ left: 16, right: 16, top: 16, bottom: 16 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

代码详解

1. 数据结构设计

private musicData: Array<{
  albumName: string,
  albumCover: Resource,
  artist: string,
  songs: Array<{
    id: string,
    title: string,
    duration: string,
    isFavorite: boolean
  }>
}>

• 定义专辑和歌曲的数据结构
• 专辑包含名称、封面和艺术家信息
• 歌曲包含ID、标题、时长和收藏状态

2. 页面布局结构

Column() {
  Row() { /* 应用标题 */ }
  Scroll() {
    Column({ space: 12 }) {
      ForEach(this.musicData, (album) => {
        FolderStack() { /* 专辑内容 */ }
      })
    }
  }
}

• 使用Column作为页面根容器
• 顶部显示应用标题和功能按钮
• 内容区域支持滚动

3. 专辑标题实现

FolderStackHeader() {
  Row() {
    Image(album.albumCover)
    Column() {
      Text(album.albumName)
      Text(album.artist)
    }
    Text(`${album.songs.length}首`)
  }
}

• 显示专辑封面、名称和艺术家
• 右侧显示歌曲数量
• 合理的布局和间距

4. 歌曲列表实现

FolderStackContent() {
  Column() {
    ForEach(album.songs, (song) => {
      Row() {
        Text(song.title)
        Text(song.duration)
      }
    })
  }
}

• 使用Column布局歌曲列表
• 每首歌显示标题和时长
• 统一的高度和内边距

总结

本篇文章展示了如何构建音乐播放列表的基础结构，主要实现了：

• 清晰的数据结构设计
• 专辑分组的列表布局
• 基础的歌曲信息展示
• 统一的样式规范

这个基础实现为后续添加播放控制和交互功能提供了良好的基础。