HarmonyOS NEXT仓颉开发语言实战案例：动态广场
大家好，今日要分享的是使用仓颉语言开发动态广场页面，也比较像朋友圈页面：整个页面分为两部分，分别是导航栏和状态列表，导航栏比较简单，我们可以先写下导航栏的具体代码和页面的基本结构：
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语言##仓颉##休闲娱乐#
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]