HarmonyOS NEXT 仓颉开发语言实战案例：动态广场
作者：幽蓝计划
- 2025-06-28 山东
本文字数：2019 字
阅读完需：约 7 分钟
大家好，今日要分享的是使用仓颉语言开发动态广场页面，也比较像朋友圈页面：
整个页面分为两部分，分别是导航栏和状态列表，导航栏比较简单，我们可以先写下导航栏的具体代码和页面的基本结构：
Column{Row(10){Text('推荐').fontColor(Color.BLACK).fontSize(17).fontWeight(FontWeight.Bold)Text('关注').fontColor(Color.GRAY).fontSize(16)}.width(100.percent).height(60).justifyContent(FlexAlign.Center)
List(space:10){
}.width(100.percent).layoutWeight(1).backgroundColor(Color(247, 247, 247))
}.width(100.percent).height(100.percent)复制代码
这样的话导航栏和列表容器撑满了整个页面，接下来的工作就是开发状态列表。
这里的内容也分为个人信息、状态内容和图片列表几部分，整个的布局方式是纵向的，要注意其中个人信息部分头像和名字时间是横向布局，这个比较简单。还有图片列表，我使用的方案是 Grid，这样能够快速适配不同数量的图片。
话不多说，来看看代码怎么实现。对于状态列表，我们首先要定义数据结构：
public class RowItem{private let name: String;private let time: String;private let cover: CJResource;private let content: String;private let images : ArrayList<CJResource>;
public RowItem(name:String, time:String,cover:CJResource,content:String,images:ArrayList<CJResource>){ this.name = name this.content = content this.time = time this.images = images this.cover = cover}public func getName():String{ return this.name}public func getContent():String{ return this.content}public func getTime():String{ return this.time}public func getCover():CJResource{ return this.cover} public func getImages():ArrayList<CJResource>{ return this.images}
}复制代码
我们今天不涉及网络请求，直接在本地定义数组：
@State var rowList:ArrayList<RowItem> = ArrayList<RowItem>(RowItem('Tom','7小时前',@r(app.media.icon1),'美丽的风景',ArrayList<CJResource>([@r(app.media.fj1),@r(app.media.fj2),@r(app.media.fj3)])),RowItem('PLANK','10小时前',@r(app.media.icon2),'晨跑，空气很清新，顺便用个早餐',ArrayList<CJResource>([@r(app.media.cp1)])))复制代码
最后在 List 容器中循环遍历实现列表：
List(space:10){ ForEach(rowList, itemGeneratorFunc: {item: RowItem, index: Int64 => ListItem{ Column(10){ Row(6){ Image(item.getCover()) .width(40) .height(40) .borderRadius(20) Column(4){ Text(item.getName()) .fontColor(Color.BLACK) .fontSize(15) Text(item.getTime()) .fontColor(Color.GRAY) .fontSize(15) } .alignItems(HorizontalAlign.Start) } Text('美丽的风景') .fontSize(18) .fontColor(Color.BLACK) .margin(top:3) Grid { ForEach(item.getImages(), itemGeneratorFunc: {img:CJResource,tag:Int64 => GridItem{ Image(img) .width(112) .height(112) .borderRadius(8) .onClick({e => imglist = item.getImages() dialogController.open() }) } }) } .width(100.percent) .columnsTemplate('1fr 1fr 1fr') .columnsGap(12) .rowsGap(12) .backgroundColor(0xFFFFFF) } .padding(12) .alignItems(HorizontalAlign.Start) .backgroundColor(Color.WHITE) } })}.width(100.percent).layoutWeight(1).backgroundColor(Color(247, 247, 247))复制代码
今天的内容就是这样，感谢阅读。##HarmonyOS 语言 ##仓颉 ##休闲娱乐 #
划线
评论
复制
发布于: 刚刚阅读数: 3
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论