登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›HarmonyOS NEXT仓颉开发语言实战案例：简约音乐播放页 ...

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

裆趾针 2025-6-27 09:03:17
偶然间看到一个非常漂亮的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合。
1.png

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

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

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
裆趾针
2025-6-27 09:03:17

0

粉丝关注

8

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫