当前位置：首页 > news >正文

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

news 来源：原创 2025/6/28 6:24:31

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

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

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语言##仓颉##音乐#