当前位置：首页 > news >正文

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

news 来源：原创 2025/6/29 6:27:20

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

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

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 = namethis.content = contentthis.time = timethis.images = imagesthis.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语言##仓颉##休闲娱乐#