回复
HarmonyOS元服务开发系列教程（二）：音乐播放器首页 原创 精华
幽蓝计划
发布于 2025-8-10 10:41
浏览
0收藏
大家好，幽蓝君已经在华为开发者学堂开设班级，现邀请各位友友加入班级考取开发者等级证书，加入班级的学员考取华为开发者基础/高级证书后，并发表一篇HarmonyOS技术文章，就有机会领取官方发放的精美礼品，每月数量有限，先到先得，欢迎大家加入。
为匹配信息，班级学号请填写与开发者联盟一致的手机号码，班级链接如下：https://developer.huawei.com/consumer/cn/training/classDetail/7b706ca975bd42e98b3bb51aa6b0be5a?type=1?ha_source=hmosclass&ha_sourceId=89000248
上一篇文章中简单介绍了如何创建一个元服务项目，以及元服务开发和普通应用的不同之处。今天正式进行元服务的实战开发教程，今天介绍的内容是开发音乐元服务的播放页，效果图如下：
可能有的友友看到这个页面感到眼熟，没错，我们之前分享过音乐App的开发，这一次我们基于相同的内容开发元服务。但是本次元服务全部采用V2版本组件和状态管理，并且介绍元服务与App开发的不同之处以及卡片的详细使用方式。
闲言少叙，先来分析一下这个页面。
为了能实现可能存在的页面跳转和返回，这个页面需要使用Navigation组件，但是可以看到页面颜色是通体的渐变色，为了保证页面的整体性，这里选择隐藏Navigation自带的导航栏,并设置渐变色，Navigation部分的具体代码如下：
pathStack: NavPathStack = new NavPathStack();
@Local screenWidth:number = px2vp(display.getDefaultDisplaySync().width)
@Local screenHeight:number = px2vp(display.getDefaultDisplaySync().height)
Navigation(this.pathStack){
//页面内容部分
}
.titleMode(NavigationTitleMode.Full)
.hideTitleBar(true)
.width('100%')
.height('100%')
.radialGradient({
center: [this.screenWidth/2, this.screenHeight/2],
radius: this.screenWidth*2,
colors: [[0xE0EEFF, 0.0], [0xE4F2FF, 0.3], [0xFBD4FF, 1]]
})
这时候的页面效果如下：
导航栏和背景色设置完成后，剩下的内容就是简单的垂直布局，可以把他们分为几个部分，分别是顶部的页签导航栏部分，音乐播放状态部分和播放控制部分，分类完毕之后代码布局就变得尤其简单，比如顶部导航栏部分就是非常简单的水平布局：
Row() {
Image($r('app.media.nav_down'))
.size({ width: 25, height: 25 })
Row(){
Text('相关')
.fontSize(14)
.fontColor('#76777A')
.margin({right:20})
Text('歌曲')
.fontSize(14)
.fontColor('#222628')
.margin({right:20})
Text('歌词')
.fontSize(14)
.fontColor('#76777A')
}
Image($r('app.media.nav_share'))
.size({ width: 25, height: 25 })
}
.width('100%')
.height(68)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
接下来是音乐播放状态部分，包括歌曲封面、歌曲名称以及歌手，这里要注意歌曲播放时封面要持续旋转，所以可以给封面设置动态的角度来实现，具体代码如下：
Row(){
Image($rawfile(this.musicList[this.currentIndex].cover))
.width(this.screenWidth - 50)
.height(this.screenWidth - 50)
.borderRadius((this.screenWidth - 50)/2)
.objectFit(ImageFit.Fill)
.rotate({ x: 0, y: 0, z: 1, angle: this.value*360 })
}
.margin({top:10})
.justifyContent(FlexAlign.Center)
.width('100%')
Column(){
Text(this.musicList[this.currentIndex].title)
.fontColor('#222628')
.fontSize(24)
Text(this.musicList[this.currentIndex].singer)
.fontColor('#76777A')
.fontSize(14)
.margin({top:10})
}
.width('100%')
.alignItems(HorizontalAlign.Center)
底部的音乐控制部分虽然看起来内容比较多，但也都是基础的按钮和控制条等，具体代码如下：
Column(){
Row(){
Image($r('app.media.tool_like'))
.width(24)
.height(24)
Image($r('app.media.tool_slider'))
.width(24)
.height(24)
Image($r('app.media.tool_down'))
.width(24)
.height(24)
Image($r('app.media.tool_comment'))
.width(24)
.height(24)
Image($r('app.media.tool_more'))
.width(24)
.height(24)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height(50)
Column(){
Progress({ value: 30, total: 100, type: ProgressType.Linear }) // 创建一个进度总长为100，初始进度值为24的线性进度条
.width('100%')
.margin({top:20})
.backgroundColor('rgb(239,239,239)')
.color(Color.White)
Row(){
Text('00:00')
.fontColor('#76777A')
.fontSize(13)
.fontWeight(200)
Text('00:00')
.fontColor('#76777A')
.fontSize(13)
.fontWeight(200)
}
.width('100%')
.margin({top:10})
.justifyContent(FlexAlign.SpaceBetween)
}
Row(){
Image($r('app.media.control_loop'))
.width(25)
.height(25)
Image($r('app.media.control_last'))
.width(32)
.height(32)
.objectFit(ImageFit.Auto)
.onClick(()=>{
})
Image( $r('app.media.control_pause'))
.width(64)
.height(64)
.onClick(()=>{
})
Image($r('app.media.control_next'))
.width(32)
.height(32)
.objectFit(ImageFit.Auto)
.onClick(()=>{
})
Image($r('app.media.control_list'))
.width(25)
.height(25)
.onClick(()=>{
})
}
.margin({top:30})
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.margin({bottom:40})
以上就是音乐元服务的UI部分，感谢阅读。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
已于2025-8-10 10:42:40修改
赞
收藏
回复
相关推荐
