#跟着晓明学鸿蒙# HarmonyOS NEXT：音乐播放器的歌词显示功能 - Column组件应用（二）

最新推荐文章于 2025-11-17 09:32:55 发布

原创最新推荐文章于 2025-11-17 09:32:55 发布 · 916 阅读

CC 4.0 BY-SA版权

文章标签：

在上一篇教程中，我们已经实现了音乐播放器的顶部导航栏和封面展示区域。本篇教程将继续探索Column组件的应用，重点介绍如何实现音乐播放器的歌词显示功能。歌词显示是音乐播放器中非常重要的一部分，它能够增强用户的音乐体验，让用户更好地理解和感受音乐内容。

代码实现

在实现歌词显示功能之前，我们需要确保已经定义了歌词数据结构。以下是完整的歌词显示部分代码：

// 歌词数据结构定义
private lyrics: Array<{
  time: number,
  text: string
}> = [
  { time: 0, text: '星辰大海' },
  { time: 15, text: '词：唐恬' },
  { time: 30, text: '曲：钱雷' },
  { time: 45, text: '让我为你唱一首歌' },
  { time: 60, text: '唱一首让你心动的歌' },
  { time: 75, text: '让我为你写一首诗' },
  { time: 90, text: '写一首让你心醉的诗' }
]

// 在build方法中的歌词显示部分
build() {
  Column() {
    // 前面的顶部导航栏和封面区域代码省略...
    
    // 歌词显示
    Column() {
      List() {
        ForEach(this.lyrics, (lyric) => {
          ListItem() {
            Text(lyric.text)
              .fontSize(14)
              .fontColor(lyric.time === 75 ? '#000000' : '#999999')
              .fontWeight(lyric.time === 75 ? FontWeight.Medium : FontWeight.Regular)
          }
          .height(30)
          .width('100%')
          .justifyContent(FlexAlign.Center)
        })
      }
      .width('100%')
      .height(150)
    }
    .width('100%')
    .margin({ top: 30, bottom: 30 })
    
    // 后面的进度条和控制按钮代码省略...
  }
  .width('100%')
  .height('100%')
  .backgroundColor(Color.White)
}

代码详解

歌词数据结构

首先，我们定义了一个包含时间和文本的数组来存储歌词数据：

private lyrics: Array<{
  time: number,
  text: string
}> = [
  { time: 0, text: '星辰大海' },
  { time: 15, text: '词：唐恬' },
  { time: 30, text: '曲：钱雷' },
  { time: 45, text: '让我为你唱一首歌' },
  { time: 60, text: '唱一首让你心动的歌' },
  { time: 75, text: '让我为你写一首诗' },
  { time: 90, text: '写一首让你心醉的诗' }
]

每个歌词项包含两个属性：

time：表示歌词出现的时间点（以秒为单位）
text：表示歌词的文本内容

歌词显示区实现

歌词显示区使用了嵌套的Column和List组件来实现：

Column() {
  List() {
    ForEach(this.lyrics, (lyric) => {
      ListItem() {
        Text(lyric.text)
          .fontSize(14)
          .fontColor(lyric.time === 75 ? '#000000' : '#999999')
          .fontWeight(lyric.time === 75 ? FontWeight.Medium : FontWeight.Regular)
      }
      .height(30)
      .width('100%')
      .justifyContent(FlexAlign.Center)
    })
  }
  .width('100%')
  .height(150)
}
.width('100%')
.margin({ top: 30, bottom: 30 })

这段代码的关键点是：

外层Column容器：
- 设置了width('100%')使其占据父容器的全部宽度
- 通过margin({ top: 30, bottom: 30 })设置上下边距，与其他区域保持适当间隔
List组件：
- 用于显示可滚动的歌词列表
- 设置了固定高度height(150)，限制了歌词显示区域的大小
ForEach循环：
- 遍历lyrics数组，为每个歌词项创建一个ListItem
- 每个ListItem包含一个Text组件，显示歌词文本
高亮当前歌词：
- 通过条件表达式lyric.time === 75 ? '#000000' : '#999999'判断是否为当前播放的歌词
- 当前歌词使用黑色和中等字重显示，其他歌词使用灰色和常规字重显示
- 在实际应用中，这个条件应该根据当前播放时间动态变化
ListItem布局：
- 设置了固定高度height(30)，使每行歌词有统一的高度
- 通过justifyContent(FlexAlign.Center)使歌词在垂直方向居中对齐