Practical Case of HarmonyOS NEXT Cangjie Development Language: Dynamic Square

Hello everyone, today I'm going to share the development of a dynamic square page using the Cangjie language, which is also quite similar to a Moments page:

The entire page is divided into two parts, namely the navigation bar and the status list. The navigation bar is relatively simple. We can first write down the specific code of the navigation bar and the basic structure of the page:

Column{
    Row(10){
        Text('推荐')
        .fontColor(Color.BLACK)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        Text('关注')
        .fontColor(Color.GRAY)
        .fontSize(16)
    }
    .width(100.percent)
    .height(60)
    .justifyContent(FlexAlign.Center)

    List(space:10){

    }
    .width(100.percent)
    .layoutWeight(1)
    .backgroundColor(Color(247, 247, 247))
}
.width(100.percent)
.height(100.percent) 

In this way, the navigation bar and the list container fill up the entire page. The next task is to develop the status list.

The content here is also divided into several parts: personal information, status content, and image list. The overall layout is vertical. It should be noted that the profile picture and name of the personal information section are arranged horizontally, which is relatively simple. There is also the list of pictures. The solution I use is Grid, which can quickly adapt to different numbers of pictures.

Without further ado, let's take a look at how the code is implemented. For the status list, we first need to define the data structure:

public class RowItem{
    private let name: String;
    private let time: String;
    private let cover: CJResource;
    private let content: String;
    private let images : ArrayList<CJResource>;

    public RowItem(name:String, time:String,cover:CJResource,content:String,images:ArrayList<CJResource>){
        this.name = name
        this.content = content
        this.time = time
        this.images = images
        this.cover = cover
    }
    public func getName():String{
        return this.name
    }
    public func getContent():String{
        return this.content
    }
    public func getTime():String{
        return this.time
    }
    public func getCover():CJResource{
        return this.cover
    }
     public func getImages():ArrayList<CJResource>{
        return this.images
    }
}   

We don't involve network requests today. We directly define the array locally:

@State var rowList:ArrayList<RowItem> = ArrayList<RowItem>(
    RowItem('Tom','7小时前',@r(app.media.icon1),'美丽的风景',ArrayList<CJResource>([@r(app.media.fj1),@r(app.media.fj2),@r(app.media.fj3)])),
    RowItem('PLANK','10小时前',@r(app.media.icon2),'晨跑，空气很清新，顺便用个早餐',ArrayList<CJResource>([@r(app.media.cp1)]))
)    

Finally, loop through the List container to implement the list:

List(space:10){
    ForEach(rowList, itemGeneratorFunc: {item: RowItem, index: Int64 =>
                ListItem{
                Column(10){
                    Row(6){
                        Image(item.getCover())
                        .width(40)
                        .height(40)
                        .borderRadius(20)
                        Column(4){
                            Text(item.getName())
                            .fontColor(Color.BLACK)
                            .fontSize(15)
                            Text(item.getTime())
                            .fontColor(Color.GRAY)
                            .fontSize(15)
                        }
                        .alignItems(HorizontalAlign.Start)
                    }
                    Text('美丽的风景')
                    .fontSize(18)
                    .fontColor(Color.BLACK)
                    .margin(top:3)
                    Grid {
                        ForEach(item.getImages(), itemGeneratorFunc: {img:CJResource,tag:Int64 =>
                                    GridItem{
                                    Image(img)
                                    .width(112)
                                    .height(112)
                                    .borderRadius(8)
                                    .onClick({e =>
                                        imglist = item.getImages()
                                        dialogController.open()
                                        })
                                }
                                })
            }
            .width(100.percent)
            .columnsTemplate('1fr 1fr 1fr')
            .columnsGap(12)
            .rowsGap(12)
            .backgroundColor(0xFFFFFF)
                }
                .padding(12)
                .alignItems(HorizontalAlign.Start)
                .backgroundColor(Color.WHITE)

            }
            })
}
.width(100.percent)
.layoutWeight(1)
.backgroundColor(Color(247, 247, 247))  

That's all for today's content. Thank you for reading.