偶然间看到一个非常漂亮的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合。
看到这个页面，我们先做一个简单的分析。整个页面分为上中下三个部分，顶部为导航栏，底部是歌词工具栏，剩下的就是中间的歌曲信息和控制按钮部分。它们的部分方式是比较简单的纵向布局。页面大致结构代码如下：
Column{ //导航栏 Stack { Text('Now Playing') .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(Color.BLACK) Row{ Image(@r(app.media.cm_back)) .width(35) .height(35) .onClick({evet => Router.back()}) }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5) } .padding(left:10,right:10) .width(100.percent) .height(60) .backgroundColor(Color.WHITE) Column{//中间内容 } //歌词 Row{ Row(10){ Image(@r(app.media.cm_music)) .width(35) .height(35) Text('Lyrics') .fontColor(Color.BLACK) .fontWeight(FontWeight.Bold) .fontSize(16) } Image(@r(app.media.cm_up)) .width(45) .height(45) } .padding(left:10,right:10) .width(100.percent) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween)}.justifyContent(FlexAlign.SpaceBetween).width(100.percent).height(100.percent)
复制代码
上面代码展示了页面的基本结构和顶底部分的具体代码，现在我们只剩下中间内容部分。歌曲封面和点赞按钮可以看作一个整体，并且它们有一部分重叠，可以将 margin 设置负数来实现：
Column{ Image(@r(app.media.cm_cover)) .width(65.percent) .objectFit(ImageFit.Contain) Image(@r(app.media.cm_like)) .width(60) .height(60) .margin(top:-15)}
复制代码
歌曲名字部分过于简单，不再赘述了。进度条是我们之前没有用过的组件，仓颉提供的进度条功能丰富，提供了多种模式，并且使用起来非常方便：
Progress(value: 50.0, total: 100.0, type: ProgressType.Linear).width(100.percent).color(0x9570FF)
复制代码
控制按钮部分也比较简单，它们是本页面为数不多的横向布局，具体代码如下：
Row{ Text('00:36') .fontColor(0x9570FF) .fontSize(13) Image(@r(app.media.skip_previous)) .width(33) .height(33) Image(@r(app.media.cm_play)) .width(80) .height(80) Image(@r(app.media.skip_next)) .width(33) .height(33) Text('03:36') .fontColor(Color.GRAY) .fontSize(13)}.alignItems(VerticalAlign.Center).width(100.percent).justifyContent(FlexAlign.SpaceAround)
复制代码
到这里音乐播放页面就完成了，感谢阅读。##HarmonyOS 语言 ##仓颉 ##音乐 #
评论