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

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

 

 

在开始写代码之前，我们依然先分析一下页面的结构，这个页面整体是一个上下滚动的列表，所以使用List容器实现。在List容器内部的元素可以分为三个部分，最上面是轮播图，接下来是分类的可以左右滑动的列表，最底部是影片影响，是一个网格布局。

现在我们可以着手写代码，先看最上面的轮播图，仓颉语言提供了Swiper组件，可以很方便的实现轮播图的很多功能效果。下面为大家演示它的基本使用：

 

 

var controller: SwiperController = SwiperController()
Swiper(this.controller){
                ForEach(this.imglist, itemGeneratorFunc: {img:CJResource,index:Int64 =>
                            Image(img)
                        .width(300)
                        .height(300)

                            } )
            }

Swiper还有很多丰富的功能参数可以设置，下面为大家介绍一些常用的参数：

cachedCount:预加载子组件的个数

autoPlay：是否自动播放

loop:是否循环显示

curve：轮播图的动画曲线

duration:切换的动画时长

 

接下来两个部分都有标题了，所以使用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语言##仓颉##休闲娱乐#