Practical Case of HarmonyOS NEXT Cangjie Development Language: Simple Music Playback Page

By chance, I came across a very beautiful design drawing of a music player and couldn’t help but want to practice with the Cangjie language. When a beautiful design drawing meets an elegant development language, it’s simply a perfect match., let me show you the beautiful renderings：

As is customary, before starting to write the code, let's first make a simple analysis of the overall structure of the page. Firstly, this page has a Navigation bar, but it should be noted that the title of the navigation bar is in the middle. In the system's navigation component, it is impossible to center the title, so we need to customize the navigation bar. When defining the navigation bar, I chose to use the Stack layout to place the titles in an independent space, thereby achieving complete centering and not being affected by other components.
Apart from the navigation bar, the other parts are arranged vertically, from top to bottom: the song cover, song information, playback progress bar, audio control bar, and the lyrics control bar at the very bottom.
The overall structure code of the page is as follows:

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)

The above code shows the basic structure of the page and the specific code of the top and bottom parts. Now we only have the middle content part left.
The song cover and the like button can be regarded as a whole, and they partially overlap. This can be achieved by setting the margin to a negative number:

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

The song title section is a simple vertical layout of two Text components, with different fonts and colors set. The code is relatively simple and will not be listed or elaborated here. The progress bar is a component we haven't used before. The progress bar provided by Cangjie is rich in functions, offers multiple modes, and is very convenient to use. The demonstration code is as follows

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

The control button section is also relatively simple. They are one of the few horizontal layouts on this page. Just select "SpaceAround" for alignment. The specific code is as follows

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)

The music playback page is completed here. Thank you for reading.