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

最新推荐文章于 2025-08-05 16:44:26 发布

转载最新推荐文章于 2025-08-05 16:44:26 发布 · 30 阅读

文章标签：

26. HarmonyOS NEXT仓颉开发语言实战案例：动态广场 06-28

27.HarmonyOS NEXT仓颉开发语言实战案例：图片预览器06-28 28.HarmonyOS NEXT仓颉开发语言实战案例：健身App06-29 29.HarmonyOS NEXT仓颉开发语言实战案例：小而美的旅行App06-29

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

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

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语言##仓颉##休闲娱乐#

原创作者: youlanjihua 转载于: https://www.cnblogs.com/youlanjihua/p/18953685