目录

案例介绍

在本篇文章中，我们将学习如何使用HarmonyOS NEXT的Column组件实现音乐播放器的顶部导航栏和封面展示区域。Column组件是一种基础的垂直布局容器，能够有效地组织界面元素，使其按照从上到下的顺序排列。通过本案例，您将了解如何利用Column组件的特性，结合其他布局组件，创建一个美观且功能完善的音乐播放器界面的上半部分。

代码实现

首先，我们需要定义音乐播放器的基本数据结构，包括音乐信息和歌词数据：

@Entry
@Component
struct MusicPlayer {
  // 音乐信息
  @State music: {
    title: string,
    artist: string,
    album: string,
    cover: Resource,
    duration: number,
    currentTime: number,
    isPlaying: boolean,
    isFavorite: boolean
  } = {
    title: '星辰大海',
    artist: '黄霄雲',
    album: '星辰大海',
    cover: $r('app.media.album_cover'),
    duration: 240,  // 总时长（秒）
    currentTime: 75,  // 当前播放时间（秒）
    isPlaying: false,
    isFavorite: false
  }

  // 歌词数据
  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: '写一首让你心醉的诗' }
  ]

  // 格式化时间
  private formatTime(seconds: number): string {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
  }

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Image($r('app.media.arrow_down'))
          .width(24)
          .height(24)
        Column() {
          Text(this.music.title)
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
          Text(this.music.artist)
            .fontSize(12)
            .fontColor('#999')
            .margin({ top: 4 })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Center)
        Image($r('app.media.share'))
          .width(24)
          .height(24)
      }
      .width('100%')
      .height(60)
      .padding({ left: 20, right: 20 })
      .backgroundColor(Color.White)

      // 封面区域
      Column() {
        Image(this.music.cover)
          .width('80%')
          .aspectRatio(1)
          .borderRadius(10)
          .shadow({
            radius: 20,
            color: '#33000000',
            offsetY: 10
          })
      }
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
      
      // 这里省略其他部分...
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

代码详解

数据结构设计

在我们的音乐播放器中，首先定义了两个关键的数据结构：

1. 音乐信息数据：使用@State装饰器定义了一个响应式的音乐对象，包含标题、艺术家、专辑、封面等信息。当这些属性发生变化时，UI会自动更新。

@State music: {
  title: string,
  artist: string,
  album: string,
  cover: Resource,
  duration: number,
  currentTime: number,
  isPlaying: boolean,
  isFavorite: boolean
}

2. 歌词数据：定义了一个包含时间和文本的数组，用于后续的歌词显示功能。

private lyrics: Array<{
  time: number,
  text: string
}>

顶部导航栏实现

顶部导航栏使用Row组件实现水平布局，包含三个主要部分：返回按钮、歌曲信息和分享按钮。

Row() {
  Image($r('app.media.arrow_down'))
    .width(24)
    .height(24)
  Column() {
    Text(this.music.title)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
    Text(this.music.artist)
      .fontSize(12)
      .fontColor('#999')
      .margin({ top: 4 })
  }
  .layoutWeight(1)
  .alignItems(HorizontalAlign.Center)
  Image($r('app.media.share'))
    .width(24)
    .height(24)
}
.width('100%')
.height(60)
.padding({ left: 20, right: 20 })
.backgroundColor(Color.White)

这里的关键点是：

• 使用layoutWeight(1)让中间的歌曲信息部分占据剩余空间
• 通过alignItems(HorizontalAlign.Center)使歌曲信息在水平方向居中
• 设置适当的padding和height确保导航栏有合适的大小和间距

封面区域实现

封面区域同样使用Column组件实现，主要展示专辑封面图片：

Column() {
  Image(this.music.cover)
    .width('80%')
    .aspectRatio(1)
    .borderRadius(10)
    .shadow({
      radius: 20,
      color: '#33000000',
      offsetY: 10
    })
}
.width('100%')
.layoutWeight(1)
.justifyContent(FlexAlign.Center)

这里的关键点是：

• 使用layoutWeight(1)让封面区域占据主要空间
• 通过justifyContent(FlexAlign.Center)使封面在垂直方向居中
• 设置aspectRatio(1)确保封面图片保持1:1的宽高比
• 添加shadow属性为封面增加阴影效果，提升视觉层次感
• 使用borderRadius为封面添加圆角效果

总结

在本篇文章中，我们学习了如何使用Column组件实现音乐播放器的顶部导航栏和封面展示区域。通过合理使用Column和Row组件的嵌套，我们可以轻松实现复杂的垂直布局结构。

关键要点：

1. 使用Column组件作为主容器，实现整体的垂直布局
2. 在Column内部嵌套Row组件，实现顶部导航栏的水平布局
3. 利用layoutWeight属性合理分配空间比例
4. 使用justifyContent和alignItems属性精确控制组件对齐方式
5. 通过shadow和borderRadius等属性增强UI的视觉效果

在下一篇教程中，我们将继续探索如何实现音乐播放器的歌词显示功能，敬请期待！