本文为大家分享使用 HarmonyOS ArkUI 做一个虎年主题音乐播放界面。
先看看最终实现的效果：
开发准备
①开发环境（简略说明）
https://harmonyos.51cto.com/posts/10130
②素材准备
界面结构
①设计页面大概构造
②通过草图拟出可能使用的组件
代码编写
①关键组件
Column
说明：纵向布局容器
接口：Column(value:{space?: Length})
space 代表纵向布局元素的间距
Column({ space: 5 }) {
//子组件
Text('hello')
...
}.width('90%').height(107).border({ width: 1 }) //Column属性
Row
说明：水平布局
接口：Row(value:{space?: Length})
space 代表横向布局元素的间距
Row(){
//子组件
Text('happy new year')
Column() {
}.width('34%')
...
}.margin({left:'20',top:'10'}) //Row属性
Image
说明：图片组件，用来展示图片
接口：Image(value: {uri: string | PixelMap})
uri 表示图片路径
使用：
Image($r("app.media.download")) //主要参数为图片路径
.margin({left:10}).height(30).width(40).objectFit(ImageFit.Contain) //设置图片更多属性以及图片缩放方式和渲染
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) //已经滑动部分的颜色
...
//还有更多属性可自行参考官方指导文档
②点击事件监听
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%')
}
}
本项目已上传 gitee：
https://gitee.com/openharmony-sig/online_event/tree/master/college_growth_program/homework/2022_0120/crusie/%E6%88%90%E9%95%BF%E6%89%93%E5%8D%A1-0120-%E6%88%BF%E5%BD%AC%E5%BD%AC/%E4%BD%9C%E4%B8%9A/%E6%BA%90%E7%A0%81/ArkUI_Application
👇扫码报名周三的鸿蒙直播课👇
求分享
求点赞
求在看
文章转载自鸿蒙技术社区，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
