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

幽蓝计划

发布于 2025-6-26 13:56

浏览

0收藏

偶然间看到一个非常美观的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合，先给大家欣赏一下美美的效果图：

HarmonyOS NEXT仓颉开发语言实战案例：简约音乐播放页-鸿蒙开发者社区

按照惯例，在开始写代码之前，我们先对页面的整体结构做一下简单的分析，首先这个页面有导航栏，但是要注意导航栏的标题是在中间的，在系统的Navigation组件无法做到将标题居中，所以我们需要自定义导航栏。定义导航栏时我选择使用Stack布局来使标题在独立的空间内，从而达到完全居中不受其他组件的影响。

除了导航栏之外，其他部分内容是竖向的布局，从上到下依次为歌曲封面、歌曲信息、播放进度条、音频控制栏和最底部的歌词控制栏。

页面的整体结构代码如下：

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)
}

歌曲名字部分就是两个Text组件简单的竖向布局，并设置不同的字体和颜色，代码比较简单，不再罗列和赘述了。进度条是我们之前没有用过的组件，仓颉提供的进度条功能丰富，提供了多种模式，并且使用起来非常方便，演示代码如下：

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

控制按钮部分也比较简单，它们是本页面为数不多的横向布局，对齐方式选择SpaceAround就可以了，具体代码如下：

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

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

其他

标签

鸿蒙仓颉

已于2025-7-22 10:10:38修改