做网站的设计软件,android手机版,卖水果网站模板,软件开发项目流程管理目录
1.外层容器效果
2.信息区-发光效果
3.信息区-内容布局
4.播放列表布局
5.播放列表动态化
6.模拟器运行并配置权限 效果#xff1a; 1.外层容器效果 Entry
Component
export struct MuiscPage {build() {Column() {// 信息区域Column() {}.width(100%)// .backgroun…
目录
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,
这样才能连上网络才能在模拟器中正常播放歌曲。
