鸿蒙Next仓颉语言开发实战教程：设置页面

仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：

导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍List容器的使用。
可以看出列表内容分为三组，所以我们要用到ListItemGroup，不过第一组是没有标题的，所以可以直接使用ListItem，布局很简单，具体代码如下：

1. ListItem{
2.     Row(8){
3.     Image(@r(app.media.chaofu))
4.     .width(60.vp)
5.     .height(60)
6.     .borderRadius(30)
7.         Column(20){
8.              Text('幽蓝计划')
9.             .fontSize(16)
10.             .fontColor(Color.BLACK)
11.             .fontWeight(FontWeight.Bold)
12.             Text('账号名: youlanjihua')
13.             .fontSize(13)
14.             .fontColor(Color.GRAY)
15.         }
16.         .alignItems(HorizontalAlign.Start)
17. }
18. .backgroundColor(Color.WHITE)
19. .width(100.percent)
20. .height(90.vp)
21. .borderRadius(10)
22. .onClick({evet =>
23.     })
24. }

复制代码

下面的两组内容都是有标题的，实现方案我建议使用List容器的head，方法是先定义header组件，然后在ListItemGroup中引用，具体代码如下：

1. @Builder func itemHead(text:String) {
2.     Row{
3.         Text(text)
4.         .fontColor(Color.GRAY)
5.         .fontSize(13)
6.     }
7.     .width(100.percent)
8.     .height(35)
9.     .alignItems(VerticalAlign.Center)
10.     .padding(top:3,left:10)
11. }
13. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('账号设置')})){
14.         //列表内容
15. }

复制代码

剩下的内容就是下面两组的内容部分了，可以看出它们几乎都是一样的，所以我们可以自定义组件来节省代码，再次介绍一下自定义组件的相关内容。首先创建新的文件，定义样式和需要的参数，以本文内容为例，具体代码是这样的：

1. @Component
2. public class setrow {
3.     @Prop var title:String
4.     @Prop var icon:CJResource
5.     @Prop var subTitle : String
6.     func build() {
7.         Row{
8.             Row{
9.                 Image(icon)
10.                 .width(20)
11.                 .height(20)
12.                 Text(title)
13.                 .fontSize(15)
14.                 .fontColor(0x4a4a4a)
15.                 .margin(left:8)
16.             }
17.             Row(8){
18.                 if(subTitle.size > 0){
19.                     Text(subTitle)
20.                     .fontColor(Color.GRAY)
21.                     .fontSize(12)
22.                 }
23.                 Image(@r(app.media.cjright))
24.                 .width(20)
25.                 .height(20)
26.             }
27.             .alignItems(VerticalAlign.Center)
28.         }
29.         .width(100.percent)
30.         .height(50)
31.         .justifyContent(FlexAlign.SpaceBetween)
32.         .backgroundColor(Color.WHITE)
33.         .padding(left:10,right:10)
34.    
35.     }
36. }

复制代码

使用组件：

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

复制代码

最后，分组中的内容是有分割线的，List和ListItemGroup都提供了分割线属性divider，这里我们只在ListItemGroup就可以，要注意分割线的宽度最好不要设置小于1的值，不然可能会有部分不显示的情况：

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

复制代码

今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！