目录
效果:
1.外层容器效果
@Entry
@Component
export struct MuiscPage {
build() {
Column() {
// 信息区域
Column() {
}
.width('100%')
// .backgroundColor(Color.Pink)
.layoutWeight(1)
// 播放列表
Column() {
}
.width('100%')
.backgroundColor('#ff333333')
.layoutWeight(2)
.borderRadius({topLeft:10,topRight:10})
}
.height('100%')
.width('100%')
.backgroundColor(Color.Black)
}
}
外层布局就不多说了,使用column容器组件,再增加属性调整。
2.信息区-发光效果
Column() {
}
.width('100%')
// .backgroundColor(Color.Pink)
.layoutWeight(1)
.radialGradient({
center:['90%','-10%'], // 设置中心点
radius:'150%',// 设置半径
colors:[ //设置颜色的
['#5c4111',0.2],
[Color.Transparent,1] //Color.Transparent表示透明色
]
})
使用径向渐变实现,可以自行设置背景色和中心点。
3.信息区-内容布局
@Entry
@Component
export struct MuiscPage {
build() {
Column() {
// 信息区域
Column({space:40}) {
// 喜欢的音乐
Row({space:10}) {
Column() {
Image($r('app.media.ic_favorite'))
.width(80)
.fillColor('#ff5286')
}
.justifyContent(FlexAlign.Center)
.width(100)
.height(100)
.backgroundColor(Color.White)
.borderRadius(10)
// 文字信息
Column({space:10}){
Text('我喜欢的音乐')
.fontColor(Color.White)
.width('100%')
.fontWeight(700)
Text('黑马程序员')
.fontColor('#ffb7b8ba')
.width('100%')
.fontSize(12)
}
}
.width('100%')
// 三个按钮
Row() {
Button({ type:ButtonType.Normal }){
Row({space:10}){
Image($r('app.media.ic_share'))
.width(20)
.fillColor('#d2577c')
Text('分享').fontColor(Color.White)
.fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type:ButtonType.Normal }){
Row({space:10}){
Image($r('app.media.ic_comment'))
.width(20)
.fillColor('#d2577c')
Text('评论').fontColor(Color.White) .fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type:ButtonType.Normal }){
Row({space:10}){
Image($r('app.media.ic_collect'))
.width(20)
.fillColor('#d2577c')
Text('收藏').fontColor(Color.White) .fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({top:30,right:20,bottom:30,left:20})
.width('100%')
// .backgroundColor(Color.Pink)
.layoutWeight(1)
.radialGradient({
center: ['90%', '-10%'], // 设置中心点
radius: '150%', // 设置半径
colors: [ // 设置颜色的
['#5c4111', 0.2],
[Color.Transparent, 1] //Color.Transparent表示透明色
]
})
// 播放列表
Column() {
}
.width('100%')
.backgroundColor('#ff333333')
.layoutWeight(2)
.borderRadius({ topLeft: 10, topRight: 10 })
}
.height('100%')
.width('100%')
.backgroundColor(Color.Black)
}
}
信息区域也只是简单的静态布局,图片从首页导航栏的资源下载。
4.播放列表布局
@Entry
@Component
export struct MuiscPage {
build() {
Column() {
// 信息区域
Column({ space: 40 }) {
// 喜欢的音乐
Row({ space: 10 }) {
Column() {
Image($r('app.media.ic_favorite'))
.width(80)
.fillColor('#ff5286')
}
.justifyContent(FlexAlign.Center)
.width(100)
.height(100)
.backgroundColor(Color.White)
.borderRadius(10)
// 文字信息
Column({ space: 10 }) {
Text('我喜欢的音乐')
.fontColor(Color.White)
.width('100%')
.fontWeight(700)
Text('黑马程序员')
.fontColor('#ffb7b8ba')
.width('100%')
.fontSize(12)
}
}
.width('100%')
// 三个按钮
Row() {
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_share'))
.width(20)
.fillColor('#d2577c')
Text('分享').fontColor(Color.White)
.fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_comment'))
.width(20)
.fillColor('#d2577c')
Text('评论').fontColor(Color.White).fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_collect'))
.width(20)
.fillColor('#d2577c')
Text('收藏').fontColor(Color.White).fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({ top: 30, right: 20, bottom: 30, left: 20 })
.width('100%')
// .backgroundColor(Color.Pink)
.layoutWeight(1)
.radialGradient({
center: ['90%', '-10%'], // 设置中心点
radius: '150%', // 设置半径
colors: [ // 设置颜色的
['#5c4111', 0.2],
[Color.Transparent, 1] //Color.Transparent表示透明色
]
})
// 播放列表
Column() {
// 全部播放容器
Row({ space: 5 }) {
Image($r('app.media.ic_play'))
.width(15)
.fillColor('#d2577c')
Text('播放全部(16)')
.fontColor(Color.White)
.fontSize(12)
}
.width('100%')
.padding(10)
// 歌曲列表
List() {
// 每一首歌曲的信息布局
ListItem() {
Row() {
Text('1')
.fontColor(Color.White)
.width(30)
.textAlign(TextAlign.Center)
Row({space:10}) {
Image('http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg')
.width(30)
.borderRadius(5)
Column() {
Text('直到世界的尽头')
.fontColor('#ff9fa0a1')
.fontSize(12)
.width('100%')
Text('WANDS')
.fontColor('#ff9fa0a1')
.fontSize(10)
.width('100%')
}
}
.layoutWeight(1)
Image($r('app.media.ic_more'))
.fillColor(Color.White)
.width(15)
}
.width('100%')
.padding({top:8,bottom:8})
}
ListItem() {
Row() {
Text('4')
.fontColor(Color.White)
.width(30)
.textAlign(TextAlign.Center)
Row({space:10}) {
Column() {
Text('麝香夫人')
.fontColor('#ff9fa0a1')
.fontSize(12)
.width('100%')
Text('凤凰传奇')
.fontColor('#ff9fa0a1')
.fontSize(10)
.width('100%')
}
}
.layoutWeight(1)
Image($r('app.media.ic_more'))
.fillColor(Color.White)
.width(15)
}
.width('100%')
.padding({top:8,bottom:8})
}
}
}
.width('100%')
.backgroundColor('#ff333333')
.layoutWeight(2)
.borderRadius({ topLeft: 10, topRight: 10 })
}
.height('100%')
.width('100%')
.backgroundColor(Color.Black)
}
}
歌曲列表是两种格式,一种是排名前三的歌曲(带有歌曲图片),另一种是前三之外的歌曲(不带有歌曲图片),首先设置好这两种静态布局后才进入下一步。
5.播放列表动态化
export interface songItemType {
img: string
name: string
author: string
url: string
id: string
}
@Entry
@Component
export struct MuiscPage {
// 歌曲列表
@State songs: songItemType[] = [
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
name: '直到世界的尽头',
author: 'WANDS',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
id: '0000'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
name: '画',
author: '赵磊',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
id: '0001'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
name: 'Sweet Dreams',
author: 'TPaul Sax / Eurythmics',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
id: '0002'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
name: '奢香夫人',
author: '凤凰传奇',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
id: '0003'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
name: '空心',
author: '光泽',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
id: '0004'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
name: '反转地球',
author: '潘玮柏',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
id: '0005'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
name: 'No.9',
author: 'T-ara',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
id: '0006'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
name: '孤独',
author: 'G.E.M.邓紫棋',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
id: '0007'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
name: 'Lose Control',
author: 'Hedley',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
id: '0008'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
name: '倩女幽魂',
author: '张国荣',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
id: '0009'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
name: '北京北京',
author: '汪峰',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
id: '0010'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
name: '苦笑',
author: '汪苏泷',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
id: '0011'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
name: '一生所爱',
author: '卢冠廷 / 莫文蔚',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.m4a',
id: '0012'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
name: '月半小夜曲',
author: '李克勤',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.mp3',
id: '0013'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
name: 'Rolling in the Deep',
author: 'Adele',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.m4a',
id: '0014'
},
{
img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
name: '海阔天空',
author: 'Beyond',
url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.m4a',
id: '0015'
}
]
build() {
Column() {
// 信息区域
Column({ space: 40 }) {
// 喜欢的音乐
Row({ space: 10 }) {
Column() {
Image($r('app.media.ic_favorite'))
.width(80)
.fillColor('#ff5286')
}
.justifyContent(FlexAlign.Center)
.width(100)
.height(100)
.backgroundColor(Color.White)
.borderRadius(10)
// 文字信息
Column({ space: 10 }) {
Text('我喜欢的音乐')
.fontColor(Color.White)
.width('100%')
.fontWeight(700)
Text('黑马程序员')
.fontColor('#ffb7b8ba')
.width('100%')
.fontSize(12)
}
}
.width('100%')
// 三个按钮
Row() {
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_share'))
.width(20)
.fillColor('#d2577c')
Text('分享').fontColor(Color.White)
.fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_comment'))
.width(20)
.fillColor('#d2577c')
Text('评论').fontColor(Color.White).fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
Button({ type: ButtonType.Normal }) {
Row({ space: 10 }) {
Image($r('app.media.ic_collect'))
.width(20)
.fillColor('#d2577c')
Text('收藏').fontColor(Color.White).fontSize(12)
}
}
.backgroundColor('#ff363737')
.width(90)
.height(40)
.borderRadius(20)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({ top: 30, right: 20, bottom: 30, left: 20 })
.width('100%')
// .backgroundColor(Color.Pink)
.layoutWeight(1)
.radialGradient({
center: ['90%', '-10%'], // 设置中心点
radius: '150%', // 设置半径
colors: [ // 设置颜色的
['#5c4111', 0.2],
[Color.Transparent, 1] //Color.Transparent表示透明色
]
})
// 播放列表
Column() {
// 全部播放容器
Row({ space: 5 }) {
Image($r('app.media.ic_play'))
.width(15)
.fillColor('#d2577c')
Text('播放全部(16)')
.fontColor(Color.White)
.fontSize(12)
}
.width('100%')
.padding(10)
// 歌曲列表
List() {
ForEach(this.songs, (item: songItemType, index: number) => {
if (index < 3) {
// 每一首歌曲的信息布局(带图片)
ListItem() {
Row() {
// 如果是第0个,则显示黄色文字编号
if (index == 0) {
Text((index + 1).toString())
.fontColor(Color.Yellow)
.width(30)
.textAlign(TextAlign.Center)
}
// 如果是第1个,则显示红色文字编号
if (index == 1) {
Text((index + 1).toString())
.fontColor('#d2577c')
.width(30)
.textAlign(TextAlign.Center)
}
// 如果是第2个,则显示蓝色文字编号
if (index == 2) {
Text((index + 1).toString())
.fontColor('#0094ff')
.width(30)
.textAlign(TextAlign.Center)
}
Row({ space: 10 }) {
Image(item.img)
.width(30)
.borderRadius(5)
Column() {
Text(item.name)
.fontColor('#ff9fa0a1')
.fontSize(12)
.width('100%')
Text(item.author)
.fontColor('#ff9fa0a1')
.fontSize(10)
.width('100%')
}
}
.layoutWeight(1)
Image($r('app.media.ic_more'))
.fillColor(Color.White)
.width(15)
}
.width('100%')
.padding({ top: 8, bottom: 8 })
}
} else {
// 每一首歌曲的信息布局(不带图片)
ListItem() {
Row() {
Text((index + 1).toString())
.fontColor(Color.White)
.width(30)
.textAlign(TextAlign.Center)
Row({ space: 10 }) {
Column() {
Text(item.name)
.fontColor('#ff9fa0a1')
.fontSize(12)
.width('100%')
Text(item.author)
.fontColor('#ff9fa0a1')
.fontSize(10)
.width('100%')
}
}
.layoutWeight(1)
Image($r('app.media.ic_more'))
.fillColor(Color.White)
.width(15)
}
.width('100%')
.padding({ top: 8, bottom: 8 })
}
}
})
// 增加ListItem来防止最后一个歌曲看不到的问题
ListItem(){
Text('已经到低了~~~~')
.fontColor(Color.White)
.width('100%')
.textAlign(TextAlign.Center)
}
.height(60)
.padding({bottom:40})
}
}
.width('100%')
.backgroundColor('#ff333333')
.layoutWeight(2)
.borderRadius({ topLeft: 10, topRight: 10 })
}
.height('100%')
.width('100%')
.backgroundColor(Color.Black)
}
}
初始化一个歌曲数组songs,里面包含歌曲的名字歌手,图片url等信息。
关键是使用ForEach遍历数组中的信息,根据开始设置的格式,用变量替换掉常量,就可以实现前三个歌曲格式一样,前三之外的歌曲格式一样。
ForEach(this.songs, (item: songItemType, index: number) => { if (index < 3),index从0开始,这里表示遍历数组中前三个歌曲,之后的 else{} 表示遍历除前三之外的歌曲,数组中有几个前三之外的歌曲,就遍历几个,从第四首遍历到最后一首。
6.模拟器运行并配置权限
预览器不能直接播放歌曲,需要在模拟器中播放,而模拟器播放需要配置联网权限,使模拟器连接到网络才能正常播歌。
找到src/main/module.json5文件。
在"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
后面加上
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],
整体是
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
这样才能连上网络,才能在模拟器中正常播放歌曲。