DEV Community

wei chang
wei chang

Posted on

Harmonyos Next Cangjie Language Development Practical Tutorial: Message List

Hello everyone, today we are going to share the message list page of the practical tutorial for developing a shopping mall using Cangjie language.
Image description

The navigation bar of this page is different from before, but the difficulty has not increased. It’s just that the title has moved to the left. We can achieve this by using the two-end alignment method. The specific code for the navigation bar part is as follows:

Row(8){
     Text('消息')
        .fontSize(16)
        .fontColor(Color.BLACK)
        .fontWeight(FontWeight.Bold)
       Text('•••')
        .fontSize(16)
        .fontColor(Color.BLACK)
        .fontWeight(FontWeight.Bold)
}
.width(100.percent)
.height(60.vp)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.padding(left:12,right:12)
.backgroundColor(Color.WHITE)
Enter fullscreen mode Exit fullscreen mode

Right below the navigation bar is the message filtering list. Since the styles of the elements in the list are the same, we use the Foreach loop to load. To implement this kind of list, the first thing needed is data. Only with data can traversal be carried out. And before creating the data, we need to create the corresponding structure:

public class TypeItem{
    private let title: String;
    private let image: CJResource;
    public TypeItem(title:String, image:CJResource){
        this.title = title
        this.image = image
    }
    public func getTitle():String{
        return this.title
    }
     public func getImage():CJResource{
        return this.image
    }
}
Enter fullscreen mode Exit fullscreen mode

Then create an array of the structure type above:

@State var topList:ArrayList<TypeItem> = ArrayList<TypeItem>(
    TypeItem('客服',@r(app.media.kefu)),
     TypeItem('物流',@r(app.media.wuliu)),
     TypeItem('提醒',@r(app.media.tixing)),
     TypeItem('优惠',@r(app.media.youhui)),
     TypeItem('互动',@r(app.media.hudong))
)
Enter fullscreen mode Exit fullscreen mode

With the array, we can traverse. The component we are currently using for loop rendering in Cangjie is Foreach. Here, I will introduce Foreach to you in detail. Foreach has three parameters in total. The first one is dataSource, which is the data source, and the second one is itemGeneratorFunc. It is where the child component is generated. The third parameter is called keyGeneratorFunc, which is where the child component ID is generated. The third parameter is not very commonly used. So the specific code for us to loop and load the list of message types is like this:

Scroll{
    Row(30){
        ForEach(topList, itemGeneratorFunc: {item:TypeItem,index:Int64 =>
                    Column(5){
                    Row{
                        Image(item.getImage())
                        .width(26)
                        .height(26)
                        .objectFit(ImageFit.Contain)
                    }
                    .width(50)
                    .height(50)
                    .backgroundColor(Color(236,236,236))
                    .borderRadius(10)
                    .alignItems(VerticalAlign.Center)
                    .justifyContent(FlexAlign.Center)
                    Text(item.getTitle())
                    .fontColor(0x4a4a4a)
                    .fontSize(15)
                }
               .alignItems(HorizontalAlign.Center)
               .justifyContent(FlexAlign.Center)
                })
    }
}
.width(100.percent)
.backgroundColor(Color.WHITE)
.padding(bottom:7)
Enter fullscreen mode Exit fullscreen mode

Finally, there is the message List, which is largely similar to the type list above. The structure has additional fields, and the Scroll component has been replaced with a list. I won’t elaborate further. Here’s the code directly:

List{
    ForEach(msgList, itemGeneratorFunc: {item:MessageItem,index:Int64 =>
                ListItem{
                Row(6){
                    Image(item.getImage())
                    .width(50)
                    .height(50)
                    .borderRadius(10)
                    .backgroundColor(Color.RED)
                    Column(5){
                        Row{
                            Text(item.getTitle())
                            .fontColor(0x4a4a4a)
                            .fontSize(17)
                            Text('星期四')
                            .fontSize(12)
                            .fontColor(Color.GRAY)
                        }
                        .alignItems(VerticalAlign.Center)
                        .justifyContent(FlexAlign.SpaceBetween)
                        .width(100.percent)
                        Text(item.getContent())
                        .fontColor(0x4a4a4a)
                        .fontSize(14)
                    }
                    .alignItems(HorizontalAlign.Start)
                    .layoutWeight(1)
                }
                .width(100.percent)
                .height(80)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.Start)
                .padding(left:10,right:10)
            }
            })
}
.margin(top:12)
.backgroundColor(Color.WHITE)
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)