仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：
导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍 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)('账号设置')})){ //列表内容}
复制代码
剩下的内容就是下面两组的内容部分了，可以看出它们几乎都是一样的，所以我们可以自定义组件来节省代码，再次介绍一下自定义组件的相关内容。首先创建新的文件，定义样式和需要的参数，以本文内容为例，具体代码是这样的：
@Componentpublic 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 语言 ##仓颉 ##购物 #
评论