使用HarmonyOS ArkUI做一个虎年主题音乐播放界面原创精华

彬彬不吃冰

发布于 2022-1-22 18:19

浏览

5收藏

加载失败

一、开发准备

1.开发环境（简略说明）

如您未准备好相关开发环境，请参考本人前面的帖子：ArkUI_eTS手把手入门

2.素材准备

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

使用HarmonyOS ArkUI做一个虎年主题音乐播放界面-鸿蒙开发者社区

二、界面结构

1.设计页面大概构造

根据我们常见的音乐播放器页面，可做出以下结构草图：
使用HarmonyOS ArkUI做一个虎年主题音乐播放界面-鸿蒙开发者社区

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

总结出以下可能使用的相关组件：
使用HarmonyOS ArkUI做一个虎年主题音乐播放界面-鸿蒙开发者社区

三、代码编写

1.关键组件

(1).Column

说明：纵向布局容器
接口：Column(value:{space?: Length})
space代表纵向布局元素的间距
使用：

Column({ space: 5 }) {
      //子组件
	Text('hello')
	...
}.width('90%').height(107).border({ width: 1 }) //Column属性
1.
2.
3.
4.
5.

(2).Row

说明：水平布局
接口：Row(value:{space?: Length})
space代表横向布局元素的间距
使用：

Row(){
	//子组件
     Text('happy new year')
     Column() {
     }.width('34%')
	...
}.margin({left:'20',top:'10'}) //Row属性	
1.
2.
3.
4.
5.
6.
7.

(3).Image

说明：图片组件，用来展示图片
接口：Image(value: {uri: string | PixelMap})
uri表示图片路径
使用：

Image($r("app.media.download"))  //主要参数为图片路径
.margin({left:10}).height(30).width(40).objectFit(ImageFit.Contain)   //设置图片更多属性以及图片缩放方式和渲染
1.
2.

(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)   //已经滑动部分的颜色
...
//还有更多属性可自行参考官方指导文档
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

2.点击事件监听

onClick

名称：onClick(callback: (event?: ClickEvent) => void)
基本使用：

点击出现弹窗

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

Image($r('app.media.left'))
.onClick((event: ClickEvent) => {
	AlertDialog.show({ message: '弹窗内容' })  
	//上面除了message参数也可有title等其他参数
})
1.
2.
3.
4.
5.

点击图片进行参数刷新

下面是点击图片后刷新变量的例子，我们刷新变量用到的关键代码主要为：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"))
            }
          })
	.......
...........
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

四、此项目所有代码

@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%')

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.