Harmony鸿蒙实战开发-鸿蒙音乐app仿网易云音乐-「开机动画、推荐、发现、音乐列表、动态、我的」【源码在文末】


运行工具:DevEco Studio

一、运行演示

1、推荐「UI为主,带头部滚动页面」

image-20240721180950426

2、发现-界面

image-20240721181000896

2、发现-音乐播放

image-20240721181034332

3、音乐列表「也可点击播放」

image-20240721181047569

4、动态「上下滑动浏览」

image-20240721181213196

5、我的

image-20240721181222654

二、部分代码

import router from '@ohos.router'
import { songs } from '../constants/musicsj'
import {songItemType, songItemTypeModel} from '../models/music'
import AVPlayerClass from '../untils/AVPlayerClass'

// @Entry
@Component
struct Find {
  build() {
    Column() {
      Row() {
        Text('猜你喜欢').fontColor('#eaeaec')
      }
      .padding(24)
      .width('100%')
      // 页面正题
      Row(){
        // 滑动组件
        List({space:12}) {
          ForEach(songs,(item:songItemType,indexVal)=>{
            ListItem() {
              Row({space:12}) {
                Row() {
                  Image(item.img)
                    .borderRadius(8)
                    .width(60)
                }
                Column({space:12}) {
                  Text(item.name).fontColor('#e9e9e7')
                  Row({space:4}){
                    Text('VIP') .fontSize(10)
                      .padding({
                        left:6,
                        right:6,
                        top:2,
                        bottom:2
                      })
                      .border({
                        width:1,
                        color:'#c0a267'
                      }).borderRadius(10).fontColor('#c0a267')
                    Text(item.author)
                      .fontColor('#aaa9af')
                      .fontSize(12)
                  }
                }
                .layoutWeight(1)
                .alignItems(HorizontalAlign.Start)

                Row() {
                  Image($r('app.media.ic_more'))
                    .fillColor('#aaa9af')
                    .width(24)
                }
              }

            }
            .onClick(()=> {
              router.pushUrl({
                url: 'pages/Play',
                params: {
                  indexKey:indexVal
                }
              })
              AVPlayerClass.singlePlay(item)
            })

          })
          ListItem() {
            Row() {
              Text('我是有底线的~')
                .fontColor(Color.Gray)
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .padding(16)
          }
        }.width('100%').height('100%')
        .padding({
          left:24,
          right:24
        })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

export default Find

三、源码

相关鸿蒙项目点此专栏

image-20241020235757199

通过百度网盘分享的文件:…zip 链接:百度网盘 请输入提取码

文件已经加密,请点击下方名片获取源码

或:Lvnvn0508

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐