HarmonyOS NEXT仓颉开发语言实战案例：动态广场

大家好，今日要分享的是使用仓颉语言开发动态广场页面，也比较像朋友圈页面：

整个页面分为两部分，分别是导航栏和状态列表，导航栏比较简单，我们可以先写下导航栏的具体代码和页面的基本结构：

1. Column{
2.     Row(10){
3.         Text('推荐')
4.         .fontColor(Color.BLACK)
5.         .fontSize(17)
6.         .fontWeight(FontWeight.Bold)
7.         Text('关注')
8.         .fontColor(Color.GRAY)
9.         .fontSize(16)
10.     }
11.     .width(100.percent)
12.     .height(60)
13.     .justifyContent(FlexAlign.Center)
14.    
15.     List(space:10){
17.         }
18.     .width(100.percent)
19.     .layoutWeight(1)
20.     .backgroundColor(Color(247, 247, 247))
21. }
22. .width(100.percent)
23. .height(100.percent)

复制代码

这样的话导航栏和列表容器撑满了整个页面，接下来的工作就是开发状态列表。
这里的内容也分为个人信息、状态内容和图片列表几部分，整个的布局方式是纵向的，要注意其中个人信息部分头像和名字时间是横向布局，这个比较简单。还有图片列表，我使用的方案是Grid，这样能够快速适配不同数量的图片。
话不多说，来看看代码怎么实现。对于状态列表，我们首先要定义数据结构：

1. public class RowItem{
2.     private let name: String;
3.     private let time: String;
4.     private let cover: CJResource;
5.     private let content: String;
6.     private let images : ArrayList<CJResource>;
7.    
8.     public RowItem(name:String, time:String,cover:CJResource,content:String,images:ArrayList<CJResource>){
9.         this.name = name
10.         this.content = content
11.         this.time = time
12.         this.images = images
13.         this.cover = cover
14.     }
15.     public func getName():String{
16.         return this.name
17.     }
18.     public func getContent():String{
19.         return this.content
20.     }
21.     public func getTime():String{
22.         return this.time
23.     }
24.     public func getCover():CJResource{
25.         return this.cover
26.     }
27.      public func getImages():ArrayList<CJResource>{
28.         return this.images
29.     }
30. }

复制代码

我们今天不涉及网络请求，直接在本地定义数组：

1. @State var rowList:ArrayList<RowItem> = ArrayList<RowItem>(
2.     RowItem('Tom','7小时前',@r(app.media.icon1),'美丽的风景',ArrayList<CJResource>([@r(app.media.fj1),@r(app.media.fj2),@r(app.media.fj3)])),
3.     RowItem('PLANK','10小时前',@r(app.media.icon2),'晨跑，空气很清新，顺便用个早餐',ArrayList<CJResource>([@r(app.media.cp1)]))
4. )

复制代码

最后在List容器中循环遍历实现列表：

1. List(space:10){
2.     ForEach(rowList, itemGeneratorFunc: {item: RowItem, index: Int64 =>
3.                 ListItem{
4.                 Column(10){
5.                     Row(6){
6.                         Image(item.getCover())
7.                         .width(40)
8.                         .height(40)
9.                         .borderRadius(20)
10.                         Column(4){
11.                             Text(item.getName())
12.                             .fontColor(Color.BLACK)
13.                             .fontSize(15)
14.                             Text(item.getTime())
15.                             .fontColor(Color.GRAY)
16.                             .fontSize(15)
17.                         }
18.                         .alignItems(HorizontalAlign.Start)
19.                     }
20.                     Text('美丽的风景')
21.                     .fontSize(18)
22.                     .fontColor(Color.BLACK)
23.                     .margin(top:3)
24.                     Grid {
25.                         ForEach(item.getImages(), itemGeneratorFunc: {img:CJResource,tag:Int64 =>
26.                                     GridItem{
27.                                     Image(img)
28.                                     .width(112)
29.                                     .height(112)
30.                                     .borderRadius(8)
31.                                     .onClick({e =>
32.                                         imglist = item.getImages()
33.                                         dialogController.open()
34.                                         })
35.                                 }
36.                                 })
37.             }
38.             .width(100.percent)
39.             .columnsTemplate('1fr 1fr 1fr')
40.             .columnsGap(12)
41.             .rowsGap(12)
42.             .backgroundColor(0xFFFFFF)
43.                 }
44.                 .padding(12)
45.                 .alignItems(HorizontalAlign.Start)
46.                 .backgroundColor(Color.WHITE)
47.                
48.             }
49.             })
50. }
51. .width(100.percent)
52. .layoutWeight(1)
53. .backgroundColor(Color(247, 247, 247))

复制代码

今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除