鸿蒙开发—黑马云音乐之Music页面

目录

1.外层容器效果

2.信息区-发光效果

3.信息区-内容布局

4.播放列表布局

5.播放列表动态化

6.模拟器运行并配置权限

---

效果：

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: stringname: stringauthor: stringurl: stringid: 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,

这样才能连上网络，才能在模拟器中正常播放歌曲。