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

大家周末好，今天依然为大家分享之前使用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语言##仓颉##休闲娱乐#