更新升级 专属应用 系统故障 硬件故障 电脑汽车 鸿蒙刷机 鸿蒙开发Linux教程 鸿蒙开发Linux命令
当前位置:HMXT之家 > 应用开发 > 用HarmonyOS鸿蒙ArkUI技术做一个虎年主题音乐播放界面

用HarmonyOS鸿蒙ArkUI技术做一个虎年主题音乐播放界面

更新时间:2022-01-31 08:40:15浏览次数:351+次

以下教你使用HarmonyOS鸿蒙ArkUI技术做一个虎年主题音乐播放界面,内容有:开发准备、界面结构、代码编写、此项目所有代码。以下是最终能实现的效果截图:

\

一、开发准备

1.开发环境(简略说明)

如还没有准备好相关的开发环境,请参考鸿蒙ArkUI手把手入门教程(附截图和eTS组件指导文档地址)

2.素材准备

其中主要是各类图片素材的准备,比如下面的播放器背景图和一些其他按钮图片:

\

二、界面结构

1.设计页面大概构造

根据我们常见的音乐播放器页面,可做出以下结构草图:

\

2.通过草图拟出可能使用的组件

总结出以下可能使用的相关组件:

\

三、代码编写

1.关键组件

(1).Column

说明:纵向布局容器。

接口:Column(value:{space?: Length})

space代表纵向布局元素的间距。

使用:

Column({ space: 5 }) {

      //子组件

Text('hello')

...

}.width('90%').height(107).border({ width: 1 }) //Column属性

(2).Row

说明:水平布局。

接口:Row(value:{space?: Length})

space代表横向布局元素的间距。

使用:

Row(){

//子组件

     Text('happy new year')

     Column() {

     }.width('34%')

...

}.margin({left:'20',top:'10'}) //Row属性

(3).Image

说明:图片组件,用来展示图片。

接口:Image(value: {uri: string | PixelMap})

uri表示图片路径。

使用:

Image($r("app.media.download"))  //主要参数为图片路径

.margin({left:10}).height(30).width(40).objectFit(ImageFit.Contain)   //设置图片更多属性以及图片缩放方式和渲染

(4).Slider

说明:滑动条/进度条组件。

接口:Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})

其中参数分别为:当前进度值、最小值、最大值、步长、样式、进度条方向(竖直/水平)。

使用:

Slider({

value: 20,

        min: 0,

        max: 100,

        step: 1,

        style: SliderStyle.OutSet   //圆形、方形或其他样式

})

.blockColor(Color.Blue)   //滑块颜色

.trackColor(Color.Gray)   //滑动轨道背景颜色

.selectedColor(Color.Blue)   //已经滑动部分的颜色

...

//还有更多属性可自行参考官方指导文档

2.点击事件监听

关于onClick:

名称:onClick(callback: (event?: ClickEvent) => void)

基本使用:

点击出现弹窗,下面是点击图片出现弹窗的例子:

Image($r('app.media.left'))

.onClick((event: ClickEvent) => {

AlertDialog.show({ message: '弹窗内容' })  

//上面除了message参数也可有title等其他参数

})

点击图片进行参数刷新,下面是点击图片后刷新变量的例子,我们刷新变量用到的关键代码主要为console.info(括号内放置需要改变的变量):

@Entry

@Component

struct Index {

......

  @State btn_play: String = $r("app.media.play")

  @State num: number = 0

......

Image(this.btn_play).height(50).width(50).objectFit(ImageFit.Contain)

          .onClick((event:ClickEvent)=>{

            if(this.num%2==0){

              this.num+=1

              console.info(this.btn_play = $r("app.media.suspend"))

            }else{

              this.num-=1

              console.info(this.btn_play = $r("app.media.play"))

            }

          })

.......

...........

四、此项目所有代码

@Entry

@Component

struct Index {

  @State tbgc: string = '#F7F7F7'

  @State msn: string = '新年快乐'

  @State msnr: string = '清风彬彬'

  @State btn_play: String = $r("app.media.play")

  @State num: number = 0

  build() {

    Column() {

      //顶部操作容器Flex

      //使用Row作为direction参数值,表示一行

      //使用SpaceBetween作为justifyContent参数表示两端对齐

      Flex({ direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}) {

        //设置按钮样式为普通样式(方形)

        Image($r('app.media.left'))

          .height('40')

          .width("50")

          .alignSelf(ItemAlign.Start)

          .margin({left:10})

          .onClick((event: ClickEvent) => {

            AlertDialog.show({ message: '返回' })

          })

        Image($r("app.media.top_more"))

          .width('50')

          .height('40')

          .margin({right:10})

          .alignSelf(ItemAlign.Center)

      }

      .width('100%')

      //顶部代码栏结束位

      //用一个新Flex容器装载歌曲封面

     Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Start}) {

        Image($r('app.media.logo'))

          .borderRadius(20)

          .alignSelf(ItemAlign.Center)

          .opacity(0.9)

          .borderRadius(20)

          .width('80%')

          .height('60%')

          .margin({top:20,bottom: 20 })

        //歌名、作曲者

        Column() {

          Text(`${this.msn}`)

            .fontColor('#fff')

            .fontSize(30)

            .fontWeight(FontWeight.Bold)

            .alignSelf(ItemAlign.Start)

          Text(`${this.msnr}`)

            .fontSize(18)

            .alignSelf(ItemAlign.Start)

            .fontColor('#f5f5f5')

        }

        .margin({left:20})

        //歌词行

        Row(){

          Text('happy new year')

            .width('60%')

            .maxLines(2)

            .fontSize(20)

            .fontColor('#fff')

          Column() {

            Image($r("app.media.lovelogo"))

              .alignSelf(ItemAlign.End)

              .width(50)

              .height(50)

              .onClick((event:ClickEvent)=>{

                AlertDialog.show({message:'喜欢'})

              })

          }.width('34%')

        }.margin({left:'20',top:'10'})

        //歌词栏代码结束位

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

      //图片、歌曲名、作曲者、歌词容器代码结束位

      //功能栏

     Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}){

        Image($r("app.media.download")).margin({left:10}).height(30).width(40)

        Image($r("app.media.setting")).height(30).width(40)

        Image($r("app.media.sug")).height(30).width(40)

        Image($r("app.media.more")).height(40).width(40)

      }.height('8%').width('90%')

      //功能栏代码结束位

      //进度条

      Column(){

        Slider({

          value:10,

          min:0,

          max:100,

          step:1,

          style:SliderStyle.OutSet

        })

        Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}){

          Text('00:10').fontColor('#fff').fontSize(12).margin({left:10})

          Text('06:45').fontColor('#fff').fontSize(12).margin({right:10})

        }

      }.width('90%')

      //进度条代码结束位

      //播放按钮容器

    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){

        Image($r("app.media.xh")).margin({left:10}).height(25).width(25).objectFit(ImageFit.Contain)

        Image($r("app.media.last")).height(30).width(30).objectFit(ImageFit.Contain)

        Image(this.btn_play).height(50).width(50).objectFit(ImageFit.Contain)

          .onClick((event:ClickEvent)=>{

            if(this.num%2==0){

              this.num+=1

              console.info(this.btn_play = $r("app.media.suspend"))

            }else{

              this.num-=1

              console.info(this.btn_play = $r("app.media.play"))

            }

          })

        Image($r("app.media.next")).height(30).width(30).objectFit(ImageFit.Contain)

        Image($r("app.media.musiclist")).height(25).width(25).objectFit(ImageFit.Contain)

      }.width('90%').margin({top:5})

      //播放按钮Flex容器代码结束位

    } //最外层Column代码结束位

    .backgroundImage('/img/bgimage.jpg')

    .height('100%')

  }

}