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

相关推荐
zhanshuo8 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo8 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu79 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk10 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
爱笑的眼睛1110 小时前
HarmonyOS中的PX、 VP、 FP 、LPX、Percentage、Resource 详细区别是什么
华为
liuhaikang14 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛1114 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo1 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo1 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7982 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos