鸿蒙开发之音乐收藏界面

一、项目概述

本项目是基于ArkTS环境编写QQ音乐的收藏歌曲的页面，结构也偏简单。适合新手参考。以下是预览图及其结构图：

二、项目分解

因为这个页面自定义小组件比较多，所以也抽取一部分以简写代码，整个页面用Tab组件包装。其中又分为歌曲列表部分和搜索栏，还有底部的歌单播放列表。以下分别介绍这几个部分。

2.1Tab标签部分及标题部分

因为我们只做第一个页面的部分，所以这整个Tab标签结构简单。而标题部分在Tab之上，所以这个代码的主体部分如下，以下将根据这个主体代码分步详解：

import Header from '../commont/CommonComponents'
import MusicList from '../commont/MusicList'
import Find from '../commont/SearchCommon'
import ShouCang from '../Service/ShouCang'
@Entry
@Component
struct LoveSong {
  build() {
    Stack({alignContent: Alignment.Bottom}){
      Column({space:5}){
        Header({title:'我的收藏'})
          .margin({top:10})
        Tabs(){
          TabContent(){
            Flex({direction:FlexDirection.Column}){
              Find()
              Row({space:5}){
                Image($r('app.media.vidio2'))
                  .width(30)
                Text('全部播放')
                  .fontSize(20)
                Blank(110)
                Image($r('app.media.list2'))
                  .width(30)
                Image($r('app.media.download2'))
                  .width(30)
                Image($r('app.media.list1'))
                  .width(30)
              }
              .margin({left:8})
             .height(40)

              ShouCang()
            }
            .width('100%')
            .height('100%')

          }.tabBar('歌曲')

          TabContent(){
            Text('专辑')
          }.tabBar('专辑')
          TabContent(){
            Text('歌单')
          }.tabBar('歌单')
          TabContent(){
            Text('视频')
          }.tabBar('视频')
        }
        .width('100%')
        .height('100%')
        .barMode(BarMode.Fixed)

      }
      .backgroundImage($r('app.media.back'))
      .width('100%')
      .height('100%')

      MusicList().margin({bottom:8})
    }

  }
}

其中，Header自定义函数是我们自定义的标题部分，其代码如下，只需导出应用到以上代码中即可：

import router from '@ohos.router'
@Component
export default struct Header {
  private title:ResourceStr
  build() {
    Row({space:5}) {
      Image($r('app.media.left'))
        .width(30)
        .margin({left:10})
        .onClick(() => {
          router.back()
        })
      Blank()
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Image($r('app.media.setting2'))
        .width(30)
        .margin({left:10})
      Image($r('app.media.share'))
        .width(30)
        .margin({left:5})
      Image($r('app.media.more2'))
        .width(30)
        .margin({right:10})
    }
    .width('100%')
    .height(30)
  }
}

2.2、搜索栏部分

这部分很简单，只需要用到Search组件，再用Row组件包裹，设置样式和边距即可。依照官方文档中Search组件的介绍属性应用即可。

官方文档——Search组件

@Component
export default struct Find {
  @State changeValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Row(){
      Search({value: this.changeValue, placeholder:'搜索', controller: this.controller})
        .width('90%')
        .height(35)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({size:16, weight:200})
        .textFont({size:16, weight:200})
        .margin({top:3})
    }
    .width('100%')
    .height(35)
    .justifyContent(FlexAlign.SpaceAround)
  }
}

2.3、歌曲列表部分

这部分和商城列表差不多，同样是用List组件来包装，不同的是对单个数组的样式设置。需要注意的是每个部分之间需要的距离。代码如下：

class Item{
  index:number
  name:string
  singer:string
  constructor(index:number,name:string,singer:string) {
    this.index = index
    this.name = name
    this.singer = singer
  }
}

@Builder function SongList(item:Item){
    Row({space:10}){
      Text(item.index.toFixed())
        .fontSize(18)
      Column({space:3}){
        Text(item.name)
          .fontSize(18)
        Text(item.singer)
          .fontSize(14)
      }
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
      Blank()
      Image($r('app.media.bofang3'))
        .width(25)
      Image($r('app.media.more2'))
        .width(25)
    }.width('100%').margin(2)
}
@Preview
@Component
export default struct ShouCang {
  private items:Array<Item> =[
    new Item(1,'夜幕之下','小曲儿/白翎'),
    new Item(2,'無告','MY FIRST STORY'),
    new Item(3,'Seven Days "Prismagic"','Switch'),
    new Item(4,'No name yet (此刻无名)','Double Face'),
    new Item(5,'Nothing In The Story','MY FIRST STORY'),
    new Item(6,'Said that','Xlamv'),
    new Item(7,'FLY HIGH!!!','BAE'),
    new Item(8,'WITHOUT ME','GYROAXIA'),
    new Item(9,'GET MYSELF','GYROAXIA'),
    new Item(11,'火花散ル','GYROAXIA'),
    new Item(12,'LIAR','GYROAXIA'),
    new Item(13,'葬花','THT'),
  ]

  build() {
    Column(){
      List({space:8}){
        ForEach(this.items,(item:Item) =>{
          ListItem(){
           SongList(item)
          }
        })
      }
      .width('100%')
      .height('90%')
    }
    .margin({left:10,right:10})
  }
}

2.4、 底部播放列表

这个部分也很简单，主体只需Row组件包裹，每个元素分别设置好宽度和边距即可。

值得注意的是，这个播放图片的进度条是Progress组件,因为以后这个进度条是会根据音乐播放而改变数值，在这里只是先做模拟，定了一个固定数值。

而这个进度条组件和播放图标是嵌套的，需要Stack组件进行嵌套。这两个组件可以根据官方文档了解。

官方文档——Progress组件     官方文档——Stack组件

@Component
export default struct MusicList {
  build() {
    Row(){
      Image($r('app.media.changpian'))
        .width(30)
        .margin({left:10,top:5})
      Text('QQ音乐 听我想听')
        .margin({right:80})

      Stack(){
        Image($r('app.media.Bofang2'))
          .width(30)
        Progress({value:30,type:ProgressType.Ring})
          .width(40)
          .height(40)
      }
      Image($r('app.media.list'))
        .width(25)
        .margin(3)
    }
    .margin(5)
    .backgroundColor(Color.Gray)
    .height(50)
    .width('90%')
    .borderRadius(25)
  }
}

 2.5、Tab和底部列表的嵌套

常用音乐软件的我们都知道，我们滑动音乐列表时，底部表示播放歌曲的部分并不会划走。这就用到了上面说过的Stack堆叠容器组件，通过这个组件把页面和底部播放部分绑定在一起，这样就实现了我们需要的效果。

代码如下，（整体代码在开头）

三、总结

通过以上的讲解，我们可以了解到。编写页面代码最重要的是各个组件之间的灵活运用。更多具体组件的应用就移步官方文档吧。

官方文档