Practical Case of HarmonyOS NEXT Cangjie Development Language: Movie App

Hello everyone, this weekend. Today, I'm still going to share with you a case that was previously implemented using ArkTS. It's a movie App. Today, I'm implementing it again using the UI of Cangjie. Let's take a look at the similarities and differences between Cangjie and ArkTs.

Before starting to write the code, let's still analyze the structure of the page first. This page as a whole is a List that scrolls up and down, so the list container is used to implement it. The elements inside the List container can be divided into three parts. The top part is the carousel, followed by a classified list that can be swiped left and right, and the bottom part is the video influence, which is a grid layout.
Now we can start writing the code. First, let's take a look at the carousel at the top. Cangjie language provides a Swiper component, which can conveniently implement many functional effects of the carousel. Here is a demonstration of its basic usage for everyone:

var controller: SwiperController = SwiperController()
Swiper(this.controller){
ForEach(this.imglist, itemGeneratorFunc: {img:CJResource,index:Int64 =>
Image(img)
.width(300)
.height(300)

})"
}
Swiper has many rich functional parameters that can be set. Here are some commonly used parameters for you:
cachedCount: The number of preloaded child components
autoPlay: Whether to play automatically
loop: Whether to display in a loop
curve: The animated curve of the carousel
duration: The duration of the switched animation

The next two parts both have titles, so we will use the header of ListItemGroup to implement them. This part of the knowledge point has been frequently used by us recently:

@Builder func itemHead(text:String) {
    Row{
        Text(text)
        .fontColor(Color.WHITE)
        .fontSize(13)
    }
    .width(100.percent)
    .height(35)
    .alignItems(VerticalAlign.Center)
    .padding(top:3,left:10)
}
ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)(‘分类’)})){
}   

Next comes the content part of the classification list. First, we need to define an array. The array writing method of Cangjie is slightly different from that of ArkTS:

@State var types:ArrayList<String> = ArrayList<String>(['全部的','动作','喜剧片','爱情','乡村','都市','战争'])    

Then, in the page, add classification components in a loop. The Foreach writing method of Cangjie is also different from that of ArkTS:

Scroll{
    Row{
        ForEach(types, itemGeneratorFunc: {str:String,index:Int64 =>
            if(index == currentType){
                    Text(str)
                    .fontSize(15)
                    .fontColor(Color.WHITE)
                    .padding(top:8,bottom:8,left:22,right:22)
                    .borderRadius(15)
                    .backgroundColor(0x6152FF)
            }else {
                    Text(str)
                    .fontSize(15)
                    .fontColor(Color.WHITE)
                    .padding(top:8,bottom:8,left:22,right:22)
                    .borderRadius(15)
                    .backgroundColor(Color(6, 4, 31, alpha: 1.0))
            }
                })
    }
} 

The bottom part of the movie list is similar to the above. Just post the code directly:

ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('最受欢迎')})){
    ListItem{
        Scroll{
            Row(10){
                ForEach(ArrayList<String>(['1','1','2']), itemGeneratorFunc: {str:String,index:Int64 =>
                            Image(@r(app.media.fm))
                        .width(124)
                        .height(180)
                        .borderRadius(10)
                        .objectFit(ImageFit.Fill)
                            })
            }
        }
    }
}  

The above is today's content sharing. Thank you for reading.