HarmonyOS 與 ArkTS | ForEach 迴圈渲染 + List 實現滑動影片列表

HarmonyOS 與 ArkTS | ForEach 迴圈渲染 + List 實現滑動影片列表

本文為記錄，內容較簡單，無註釋。

實現效果：

程式碼：

import image from '@ohos.multimedia.image'
class Item{
  name: string
  classification: string
  image: ResourceStr

  constructor(name: string, classification: string, image: ResourceStr) {
    this.name = name
    this.classification = classification
    this.image = image
  }
}

@Entry
@Component
struct Index {
  count: number = 0
  private items: Array<Item> = [
    new Item('藥屋少女的呢喃', '日本動漫 懸疑 劇情', $rawfile('C1.jpg')),
    new Item('進擊的巨人最終季', '日本動漫 熱血 戰鬥 冒險', $rawfile('C2.jpg')),
    new Item('神兵小將', '國產動漫', $rawfile('C3.jpg')),
    new Item('甜心格格', '國產動漫 搞笑 劇情', $rawfile('C4.jpg')),
    new Item('洛克王國：聖龍的守護', '奇幻 冒險 國產動漫', $rawfile('C5.jpg')),
    //複製
    new Item('藥屋少女的呢喃', '日本動漫 懸疑 劇情', $rawfile('C1.jpg')),
    new Item('進擊的巨人最終季', '日本動漫 熱血 戰鬥 冒險', $rawfile('C2.jpg')),
    new Item('神兵小將', '國產動漫', $rawfile('C3.jpg')),
    new Item('甜心格格', '國產動漫 搞笑 劇情', $rawfile('C4.jpg')),
    new Item('洛克王國：聖龍的守護', '奇幻 冒險 國產動漫', $rawfile('C5.jpg')),
    new Item('藥屋少女的呢喃', '日本動漫 懸疑 劇情', $rawfile('C1.jpg')),
    new Item('進擊的巨人最終季', '日本動漫 熱血 戰鬥 冒險', $rawfile('C2.jpg')),
    new Item('神兵小將', '國產動漫', $rawfile('C3.jpg')),
    new Item('甜心格格', '國產動漫 搞笑 劇情', $rawfile('C4.jpg')),
    new Item('洛克王國：聖龍的守護', '奇幻 冒險 國產動漫', $rawfile('C5.jpg')),
    new Item('藥屋少女的呢喃', '日本動漫 懸疑 劇情', $rawfile('C1.jpg')),
    new Item('進擊的巨人最終季', '日本動漫 熱血 戰鬥 冒險', $rawfile('C2.jpg')),
    new Item('神兵小將', '國產動漫', $rawfile('C3.jpg')),
    new Item('甜心格格', '國產動漫 搞笑 劇情', $rawfile('C4.jpg')),
    new Item('洛克王國：聖龍的守護', '奇幻 冒險 國產動漫', $rawfile('C5.jpg'))
  ]

  build() {
    Column(){
      Row(){
        Text('影片列表')
          .fontSize('30')
          .margin({left: 20, top: 20, bottom: 20})
          .fontColor(Color.White)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Top)
      .backgroundColor('#a61b29')
      List({space: 5}){
        ForEach(
          this.items,
          item => {
            ListItem(){
              Row(){
                Image(item.image)
                  .width('100')
                Column({space: 20}){
                  Text((++this.count).toString())
                    .fontColor(Color.Red)
                  Text(item.name)
                    .fontSize('20')
                    .fontWeight(FontWeight.Bold)
                    .fontColor(Color.White)
                  Text(item.classification)
                    .fontColor(Color.White)
                }
                .alignItems(HorizontalAlign.End)
              }
              .width('95%')
              .justifyContent(FlexAlign.SpaceBetween)
              .backgroundColor('#4f00cf')
              .margin({top: 10})
              .padding({left: 10,right: 30})
              .borderRadius('10')
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f1f0ed')
  }
}