HarmonyOS NEXT 仓颉开发语言实战案例：电影 App

2025-06-30
山东
本文字数：1130 字
阅读完需：约 4 分钟

大家周末好，今天依然为大家分享之前使用 ArkTS 实现过的案例，一个电影 App，今天使用仓颉的 UI 再次实现，看看仓颉和 ArkTs 有哪些相同和不同之处。

这个页面的结构比较简单，因为没有导航栏，全都使用 List 容器实现，最顶部是一个巨大的图片，这个不再演示，继续看下面的部分。

接下来两个部分都有标题了，所以使用 ListItemGroup 的 header 来实现，这部分知识点我们最近频繁用到：

@Builder func itemHead(text:String) {    Row{        Text(text)        .fontColor(Color.WHITE)        .fontSize(13)    }    .width(100.percent)    .height(35)    .alignItems(VerticalAlign.Center)    .padding(top:3,left:10)}ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)(‘分类’)})){}

复制代码

接下来是分类列表的内容部分，我们首先要定义一个数组，仓颉的数组写法和 ArkTS 略有不同：

@State var types:ArrayList<String> = ArrayList<String>(['全部的','动作','喜剧片','爱情','乡村','都市','战争'])

复制代码

然后在页面中循环添加分类组件，仓颉的 Foreach 写法也是和 ArkTS 不同的：

Scroll{    Row{        ForEach(types, itemGeneratorFunc: {str:String,index:Int64 =>            if(index == currentType){                    Text(str)                    .fontSize(15)                    .fontColor(Color.WHITE)                    .padding(top:8,bottom:8,left:22,right:22)                    .borderRadius(15)                    .backgroundColor(0x6152FF)            }else {                    Text(str)                    .fontSize(15)                    .fontColor(Color.WHITE)                    .padding(top:8,bottom:8,left:22,right:22)                    .borderRadius(15)                    .backgroundColor(Color(6, 4, 31, alpha: 1.0))            }                })    }}

复制代码

最底部分电影列表和上面类似，直接贴代码：

ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('最受欢迎')})){    ListItem{        Scroll{            Row(10){                ForEach(ArrayList<String>(['1','1','2']), itemGeneratorFunc: {str:String,index:Int64 =>                            Image(@r(app.media.fm))                        .width(124)                        .height(180)                        .borderRadius(10)                        .objectFit(ImageFit.Fill)                            })            }        }    }}

复制代码

以上就是今天的内容分享，感谢阅读。##HarmonyOS 语言 ##仓颉 ##休闲娱乐 #

发布于: 刚刚阅读数: 5

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS NEXT 仓颉开发语言实战案例：电影 App

幽蓝计划

评论