鸿蒙Next仓颉语言开发实战教程：消息列表

大家好，今天要分享的是仓颉语言开发商城应用实战教程的消息列表页面。

这个页面的导航栏和之前有所不同，不过难度并没有增加，只是标题移到了左边，我们使用两端对齐方式就能实现，导航栏部分的具体代码如下：

1. Row(8){
2.      Text('消息')
3.         .fontSize(16)
4.         .fontColor(Color.BLACK)
5.         .fontWeight(FontWeight.Bold)
6.        Text('•••')
7.         .fontSize(16)
8.         .fontColor(Color.BLACK)
9.         .fontWeight(FontWeight.Bold)
10. }
11. .width(100.percent)
12. .height(60.vp)
13. .alignItems(VerticalAlign.Center)
14. .justifyContent(FlexAlign.SpaceBetween)
15. .padding(left:12,right:12)
16. .backgroundColor(Color.WHITE)

复制代码

紧邻导航栏下方的是消息筛选列表，因为列表里元素的样式相同，所以我们使用Foreach循环加载。实现这种列表首先需要的是数据，有了数据才能进行遍历。而在创建数据之前我们需要创建对应的结构体：

1. public class TypeItem{
2.     private let title: String;
3.     private let image: CJResource;
4.     public TypeItem(title:String, image:CJResource){
5.         this.title = title
6.         this.image = image
7.     }
8.     public func getTitle():String{
9.         return this.title
10.     }
11.      public func getImage():CJResource{
12.         return this.image
13.     }
14. }

复制代码

然后创建上方结构体类型的数组：

1. @State var topList:ArrayList<TypeItem> = ArrayList<TypeItem>(
2.     TypeItem('客服',@r(app.media.kefu)),
3.      TypeItem('物流',@r(app.media.wuliu)),
4.      TypeItem('提醒',@r(app.media.tixing)),
5.      TypeItem('优惠',@r(app.media.youhui)),
6.      TypeItem('互动',@r(app.media.hudong))
7. )

复制代码

有了数组我们就可以遍历了，仓颉中循环渲染的组件我们目前使用的是Foreach，这里再把Foreach跟大家详细介绍一下，Foreach一共有三个参数，第一个是dataSource，也就是数据源，第二个叫itemGeneratorFunc，是生成子组件的地方，第三个参数叫keyGeneratorFunc，是生成子组件ID的地方，第三个参数不太常用。所以我们循环加载消息类型列表的具体代码是这样的：

1. Scroll{
2.     Row(30){
3.         ForEach(topList, itemGeneratorFunc: {item:TypeItem,index:Int64 =>
4.                     Column(5){
5.                     Row{
6.                         Image(item.getImage())
7.                         .width(26)
8.                         .height(26)
9.                         .objectFit(ImageFit.Contain)
10.                     }
11.                     .width(50)
12.                     .height(50)
13.                     .backgroundColor(Color(236,236,236))
14.                     .borderRadius(10)
15.                     .alignItems(VerticalAlign.Center)
16.                     .justifyContent(FlexAlign.Center)
17.                     Text(item.getTitle())
18.                     .fontColor(0x4a4a4a)
19.                     .fontSize(15)
20.                 }
21.                .alignItems(HorizontalAlign.Center)
22.                .justifyContent(FlexAlign.Center)
23.                 })
24.     }
25. }
26. .width(100.percent)
27. .backgroundColor(Color.WHITE)
28. .padding(bottom:7)

复制代码

最后是消息列表，它和上方的类型列表大同小异，结构体多了字段，Scroll组件换成了List，不再赘述，直接贴代码：

1. List{
2.     ForEach(msgList, itemGeneratorFunc: {item:MessageItem,index:Int64 =>
3.                 ListItem{
4.                 Row(6){
5.                     Image(item.getImage())
6.                     .width(50)
7.                     .height(50)
8.                     .borderRadius(10)
9.                     .backgroundColor(Color.RED)
10.                     Column(5){
11.                         Row{
12.                             Text(item.getTitle())
13.                             .fontColor(0x4a4a4a)
14.                             .fontSize(17)
15.                             Text('星期四')
16.                             .fontSize(12)
17.                             .fontColor(Color.GRAY)
18.                         }
19.                         .alignItems(VerticalAlign.Center)
20.                         .justifyContent(FlexAlign.SpaceBetween)
21.                         .width(100.percent)
22.                         Text(item.getContent())
23.                         .fontColor(0x4a4a4a)
24.                         .fontSize(14)
25.                     }
26.                     .alignItems(HorizontalAlign.Start)
27.                     .layoutWeight(1)
28.                 }
29.                 .width(100.percent)
30.                 .height(80)
31.                 .alignItems(VerticalAlign.Center)
32.                 .justifyContent(FlexAlign.Start)
33.                 .padding(left:10,right:10)
34.             }
35.             })
36. }
37. .margin(top:12)
38. .backgroundColor(Color.WHITE)

复制代码

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

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