仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：
导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍List容器的使用。
可以看出列表内容分为三组，所以我们要用到ListItemGroup，不过第一组是没有标题的，所以可以直接使用ListItem，布局很简单，具体代码如下：
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 =>
})}
下面的两组内容都是有标题的，实现方案我建议使用List容器的head，方法是先定义header组件，然后在ListItemGroup中引用，具体代码如下：
@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)('账号设置')})){
//列表内容}
剩下的内容就是下面两组的内容部分了，可以看出它们几乎都是一样的，所以我们可以自定义组件来节省代码，再次介绍一下自定义组件的相关内容。首先创建新的文件，定义样式和需要的参数，以本文内容为例，具体代码是这样的：
@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)
}}
使用组件：
ListItem{
setrow( title: '账户与安全', icon: @r(app.media.cjlogo2), subTitle: '账户保障可升级')
}
最后，分组中的内容是有分割线的，List和ListItemGroup都提供了分割线属性divider，这里我们只在ListItemGroup就可以，要注意分割线的宽度最好不要设置小于1的值，不然可能会有部分不显示的情况：
.divider(strokeWidth: 1.vp, color: Color(216, 216, 216), startMargin: 10.vp, endMargin: 0.vp)
今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##购物#