登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›HarmonyOS NEXT仓颉开发语言实战案例：电影App ...

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

翁真如 2025-6-30 07:24:00
大家周末好，今天依然为大家分享之前使用ArkTS实现过的案例，一个电影App，今天使用仓颉的UI再次实现，看看仓颉和ArkTs有哪些相同和不同之处。
 
1.png

 
这个页面的结构比较简单，因为没有导航栏，全都使用List容器实现，最顶部是一个巨大的图片，这个不再演示，继续看下面的部分。
 
接下来两个部分都有标题了，所以使用ListItemGroup的header来实现，这部分知识点我们最近频繁用到：
 
  1. @Builder func itemHead(text:String) {
  2.     Row{
  3.         Text(text)
  4.         .fontColor(Color.WHITE)
  5.         .fontSize(13)
  6.     }
  7.     .width(100.percent)
  8.     .height(35)
  9.     .alignItems(VerticalAlign.Center)
  10.     .padding(top:3,left:10)
  11. }
  12. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)(‘分类’)})){
  13. }
复制代码
 
接下来是分类列表的内容部分，我们首先要定义一个数组，仓颉的数组写法和ArkTS略有不同：
 
  1. @State var types:ArrayList<String> = ArrayList<String>(['全部的','动作','喜剧片','爱情','乡村','都市','战争'])
复制代码
 
然后在页面中循环添加分类组件，仓颉的Foreach写法也是和ArkTS不同的：
 
  1. Scroll{
  2.     Row{
  3.         ForEach(types, itemGeneratorFunc: {str:String,index:Int64 =>
  4.             if(index == currentType){
  5.                     Text(str)
  6.                     .fontSize(15)
  7.                     .fontColor(Color.WHITE)
  8.                     .padding(top:8,bottom:8,left:22,right:22)
  9.                     .borderRadius(15)
  10.                     .backgroundColor(0x6152FF)
  11.             }else {
  12.                     Text(str)
  13.                     .fontSize(15)
  14.                     .fontColor(Color.WHITE)
  15.                     .padding(top:8,bottom:8,left:22,right:22)
  16.                     .borderRadius(15)
  17.                     .backgroundColor(Color(6, 4, 31, alpha: 1.0))
  18.             }
  19.                 })
  20.     }
  21. }
复制代码
 
最底部分电影列表和上面类似，直接贴代码：
 
  1. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('最受欢迎')})){
  2.     ListItem{
  3.         Scroll{
  4.             Row(10){
  5.                 ForEach(ArrayList<String>(['1','1','2']), itemGeneratorFunc: {str:String,index:Int64 =>
  6.                             Image(@r(app.media.fm))
  7.                         .width(124)
  8.                         .height(180)
  9.                         .borderRadius(10)
  10.                         .objectFit(ImageFit.Fill)
  11.                             })
  12.             }
  13.         }
  14.     }
  15. }
复制代码
 
以上就是今天的内容分享，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
翁真如
2025-6-30 07:24:00

0

粉丝关注

15

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫