Harmonyos Next Cangjie Language Development Practical Tutorial: Settings Page

The page development tutorial for the Cangjie Language Mall application is coming to an end. Today, we are going to share the Settings page:

The navigation bar is still in the old style. I have introduced it many times before, so I won't repeat it today. The content of this page mainly introduces the usage of the List container.

It can be seen that the list content is divided into three groups, so we need to use ListItemGroup. However, the first group has no title, so we can directly use ListItem. The layout is very simple. The specific code is as follows:

ListItem{
Row(8){
Image(@r(app.media.chaofu))
.width(60.vp)
.height(60)
.borderRadius(30)
Column(20){
Text('幽蓝计划')
.fontSize(16)
.fontColor(Color.BLACK)
.fontWeight(FontWeight.Bold)
Text('账号名: youlanjihua')
.fontSize(13)
.fontColor(Color.GRAY)
}
.alignItems(HorizontalAlign.Start)
}
.backgroundColor(Color.WHITE)
.width(100.percent)
.height(90.vp)
.borderRadius(10)
.onClick({evet =>
})
}

The following two groups of content both have titles. For the implementation plan, I suggest using the head of the List container. The method is to first define the header component and then reference it in the ListItemGroup. The specific code is as follows:

@builder func itemHead(text:String) {
Row{
Text(text)
.fontColor(Color.GRAY)
.fontSize(13)
}
.width(100.percent)
.height(35)
.alignItems(VerticalAlign.Center)
.padding(top:3,left:10)
}

ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('账号设置')})){
//列表内容
}

The remaining content is the content part of the following two groups. It can be seen that they are almost the same. Therefore, we can customize components to save code. Let's introduce the relevant content of custom components again. First, create a new file, define the style and the required parameters. Taking the content of this article as an example, the specific code is as follows:

@Component
public class setrow {
@prop var title:String
@prop var icon:CJResource
@prop var subTitle : String
func build() {
Row{
Row{
Image(icon)
.width(20)
.height(20)
Text(title)
.fontSize(15)
.fontColor(0x4a4a4a)
.margin(left:8)
}
Row(8){
if(subTitle.size > 0){
Text(subTitle)
.fontColor(Color.GRAY)
.fontSize(12)
}
Image(@r(app.media.cjright))
.width(20)
.height(20)
}
.alignItems(VerticalAlign.Center)
}
.width(100.percent)
.height(50)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.WHITE)
.padding(left:10,right:10)

}

}

Use components:

ListItem{
setrow( title: '账户与安全', icon: @r(app.media.cjlogo2), subTitle: '账户保障可升级')
}

Finally, the content in the group has a divider. Both List and ListItemGroup provide the divider attribute divider. Here, we only need to use ListItemGroup. It should be noted that the width of the divider should not be set to a value less than 1, otherwise some parts may not be displayed.

.divider(strokeWidth: 1.vp, color: Color(216, 216, 216), startMargin: 10.vp, endMargin: 0.vp)

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