HarmonyOS NEXT仓颉开发语言实战案例：简约音乐播放页

偶然间看到一个非常漂亮的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合。

看到这个页面，我们先做一个简单的分析。整个页面分为上中下三个部分，顶部为导航栏，底部是歌词工具栏，剩下的就是中间的歌曲信息和控制按钮部分。它们的部分方式是比较简单的纵向布局。页面大致结构代码如下：

1. Column{
2.    //导航栏
3.     Stack {
4.         Text('Now Playing')
5.         .fontSize(18)
6.         .fontWeight(FontWeight.Bold)
7.         .fontColor(Color.BLACK)
8.         Row{
9.             Image(@r(app.media.cm_back))
10.             .width(35)
11.             .height(35)
12.             .onClick({evet => Router.back()})
13.         }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
14.     }
15.     .padding(left:10,right:10)
16.     .width(100.percent)
17.     .height(60)
18.     .backgroundColor(Color.WHITE)
19.    
20.     Column{
21. //中间内容
22.      }
23.     //歌词
24.     Row{
25.             Row(10){
26.                 Image(@r(app.media.cm_music))
27.                 .width(35)
28.                 .height(35)
29.                 Text('Lyrics')
30.                 .fontColor(Color.BLACK)
31.                 .fontWeight(FontWeight.Bold)
32.                 .fontSize(16)
33.             }
34.              Image(@r(app.media.cm_up))
35.                 .width(45)
36.                 .height(45)
37.         }
38.         .padding(left:10,right:10)
39.         .width(100.percent)
40.         .alignItems(VerticalAlign.Center)
41.         .justifyContent(FlexAlign.SpaceBetween)
42. }
43. .justifyContent(FlexAlign.SpaceBetween)
44. .width(100.percent)
45. .height(100.percent)

复制代码

上面代码展示了页面的基本结构和顶底部分的具体代码，现在我们只剩下中间内容部分。
歌曲封面和点赞按钮可以看作一个整体，并且它们有一部分重叠，可以将margin设置负数来实现：

1. Column{
2.     Image(@r(app.media.cm_cover))
3.     .width(65.percent)
4.     .objectFit(ImageFit.Contain)
5.     Image(@r(app.media.cm_like))
6.     .width(60)
7.     .height(60)
8.     .margin(top:-15)
9. }

复制代码

歌曲名字部分过于简单，不再赘述了。进度条是我们之前没有用过的组件，仓颉提供的进度条功能丰富，提供了多种模式，并且使用起来非常方便：

1. Progress(value: 50.0, total: 100.0, `type`: ProgressType.Linear)
2. .width(100.percent)
3. .color(0x9570FF)

复制代码

控制按钮部分也比较简单，它们是本页面为数不多的横向布局，具体代码如下：

1. Row{
2.     Text('00:36')
3.     .fontColor(0x9570FF)
4.     .fontSize(13)
5.     Image(@r(app.media.skip_previous))
6.     .width(33)
7.     .height(33)
8.     Image(@r(app.media.cm_play))
9.     .width(80)
10.     .height(80)
11.     Image(@r(app.media.skip_next))
12.     .width(33)
13.     .height(33)
14.     Text('03:36')
15.     .fontColor(Color.GRAY)
16.     .fontSize(13)
17. }
18. .alignItems(VerticalAlign.Center)
19. .width(100.percent)
20. .justifyContent(FlexAlign.SpaceAround)

复制代码

到这里音乐播放页面就完成了，感谢阅读。##HarmonyOS语言##仓颉##音乐#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！