大家周末好，今天依然為大家分享之前使用ArkTS實(shí)現(xiàn)過的案例，一個(gè)電影App，今天使用倉頡的UI再次實(shí)現(xiàn)，看看倉頡和ArkTs有哪些相同和不同之處。

image.png

在開始寫代碼之前，我們依然先分析一下頁面的結(jié)構(gòu)，這個(gè)頁面整體是一個(gè)上下滾動(dòng)的列表，所以使用List容器實(shí)現(xiàn)。在List容器內(nèi)部的元素可以分為三個(gè)部分，最上面是輪播圖，接下來是分類的可以左右滑動(dòng)的列表，最底部是影片影響，是一個(gè)網(wǎng)格布局。
現(xiàn)在我們可以著手寫代碼，先看最上面的輪播圖，倉頡語言提供了Swiper組件，可以很方便的實(shí)現(xiàn)輪播圖的很多功能效果。下面為大家演示它的基本使用：

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

                            } )
            }

Swiper還有很多豐富的功能參數(shù)可以設(shè)置，下面為大家介紹一些常用的參數(shù)：
cachedCount:預(yù)加載子組件的個(gè)數(shù)
autoPlay：是否自動(dòng)播放
loop:是否循環(huán)顯示
curve：輪播圖的動(dòng)畫曲線
duration:切換的動(dòng)畫時(shí)長

接下來兩個(gè)部分都有標(biāo)題了，所以使用ListItemGroup的header來實(shí)現(xiàn)，這部分知識(shí)點(diǎn)我們最近頻繁用到：

@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)(‘分類’)})){
}

接下來是分類列表的內(nèi)容部分，我們首先要定義一個(gè)數(shù)組，倉頡的數(shù)組寫法和ArkTS略有不同：

@State var types:ArrayList<String> = ArrayList<String>(['全部的','動(dòng)作','喜劇片','愛情','鄉(xiāng)村','都市','戰(zhàn)爭'])

然后在頁面中循環(huán)添加分類組件，倉頡的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)
                            })
            }
        }
    }
}

以上就是今天的內(nèi)容分享，感謝閱讀。##HarmonyOS語言##倉頡##休閑娛樂#