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.

The structure of this page is relatively simple. Since there is no navigation bar, everything is implemented using the List container. At the very top is a huge image, which will not be demonstrated here. Let’s continue to look at the following sections.

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.

Leave a Reply Cancel reply