This content originally appeared on DEV Community and was authored by wei chang
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.
Looking at this page, let’s first conduct a simple analysis. The entire page is divided into three parts: top, middle and bottom. The top is the navigation bar, the bottom is the lyrics toolbar, and the rest is the song information and control button section in the middle. Part of their approach is a relatively simple vertical layout. The general 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 name of the song is too simple and will not be elaborated on here. The progress bar is a component we haven’t used before. The progress bar provided by Cangjie is feature-rich, offers multiple modes, and is very convenient to use:
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 among the few horizontal layouts on this page. 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.
This content originally appeared on DEV Community and was authored by wei chang
wei chang | Sciencx (2025-06-27T03:07:02+00:00) Practical Case of HarmonyOS NEXT Cangjie Development Language: Simple Music Playback Page. Retrieved from https://www.scien.cx/2025/06/27/practical-case-of-harmonyos-next-cangjie-development-language-simple-music-playback-page/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.