DEV Community

wei chang
wei chang

Posted on

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.
Image description

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)(‘分类’)})){
}
Enter fullscreen mode Exit fullscreen mode

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>(['全部的','动作','喜剧片','爱情','乡村','都市','战争'])
Enter fullscreen mode Exit fullscreen mode

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))
            }
                })
    }
}
Enter fullscreen mode Exit fullscreen mode

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)
                            })
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)