网站301了不知道在哪做的,海口网站设计,贺州同城购物网站建设,株洲建设局网站仓颉语言商城应用的页面开发教程接近尾声了#xff0c;今天要分享的是设置页面#xff1a; 导航栏还是老样式#xff0c;介绍过很多次了#xff0c;今天不再赘述。这个页面的内容主要还是介绍List容器的使用。
可以看出列表内容分为三组#xff0c;所以我们要用到ListIte…仓颉语言商城应用的页面开发教程接近尾声了今天要分享的是设置页面 导航栏还是老样式介绍过很多次了今天不再赘述。这个页面的内容主要还是介绍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:StringProp var icon:CJResourceProp var subTitle : Stringfunc 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语言##仓颉##购物#
