鸿蒙的连续图

代码如下：

1、

index页面：

import { IndexModule } from '../view/IndexModule';
import { VIDEO_CATEGORIES } from '../common/Data';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        Text('开始摆布')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        List() {
          ForEach(Object.keys(VIDEO_CATEGORIES), (category: string) => {
            ListItem() {
              Column() {
                IndexModule({ moduleName: category })
                  .margin({ top: 10 })
                Text(category)
                  .fontSize(16)
                  .padding(10)
              }
            }
            .width('100%')  // Make ListItem take full width
          }, (category: string) => category)  // Simplified key generator
        }
        .listDirection(Axis.Vertical)
        .width('100%')  // Make List take full width
        .layoutWeight(1)  // Take remaining space
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)  // Align content to top
    }
    .height('100%')
    .width('100%')  // Make Row take full width
  }
}

新建一个目录view：

2、

IndexModule.ets代码如下：

import { VIDEO_CATEGORIES } from '../common/Data';
import {HorizontalItem} from "../view/HorizontalItem"
@Component
export struct IndexModule {
  private moduleName: string;

  build() {
    Column() {
      Flex({ direction: FlexDirection.Row }) {
        Text(this.moduleName)
          .fontSize(18)
          .fontWeight(FontWeight.Bolder)
      }
      .margin({ left:"3.3%",
        bottom: 12,
        top: 12 })
      List({ space: 12 }) {
        ForEach(VIDEO_CATEGORIES[this.moduleName], item => {
          ListItem() {
            Column() {
              Text(item.name).fontSize(16).padding(5); // 显示视频名称
              HorizontalItem({
                imageSrc: item.image,
                source: item.source,
                videoName: item.name
              })
            }
          }
        }, item => JSON.stringify(item))
      }
      .listDirection(Axis.Horizontal)
    }
    .margin({
      left: "3.3%",
      right: "3.3%"
    })
    .width("93.3%")
    .justifyContent(FlexAlign.Center)
    .borderRadius(24)
    .borderStyle(BorderStyle.Solid)
    .borderColor(Color.White)
    .backgroundColor("#fff")
  }
}

3、

创建一个arkts文件HorizontalItem.ets，代码如下：

// view/HorizontalItem.ts
import router from '@ohos.router';

@Component
export struct HorizontalItem {
  private imageSrc: Resource;
  private source: string;
  private videoName: string;

  build() {
    Column() {
      Image(this.imageSrc)
        .width(132)
        .height(94)
        .onClick(() => {
          // router.pushUrl({
          //   url: 'pages/SimpleVideoPlay', // 修改为你的视频播放页面路径
          //   params: { source: this.source ,imageSrc:this.imageSrc}
          // });
        })
      Text(this.videoName)
        .margin({
          top: 12,
          bottom: 12
        })
        .textAlign(TextAlign.Center)
        .fontSize(16)
    }
    .justifyContent(FlexAlign.Center)
  }
}

4、

新建一个Data.ets的文件，代码如下：

//数据
// 轮播图
// 视频
export const VIDEO_CATEGORIES = {
  '动画': [
    { name: '动画1', source: 'shipin/donghua1.mp4', image: $r('app.media.donghua1') },
    { name: '动画2', source: 'shipin/donghua2.mp4', image: $r('app.media.donghua2') },
    { name: '动画3', source: 'shipin/donghua3.mp4', image: $r('app.media.donghua3') }
  ],
  '熊猫': [
    { name: '熊猫1', source: 'shipin/panda1.mp4', image: $r('app.media.panda1') },
    { name: '熊猫2', source: 'shipin/panda2.mp4', image: $r('app.media.panda2') },
    { name: '熊猫3', source: 'shipin/panda3.mp4', image: $r('app.media.panda3') },

  ],
  '体育': [
    { name: '体育1', source: 'shipin/tiyu1.mp4', image: $r('app.media.tiyu1') },
    { name: '体育2', source: 'shipin/tiyu2.mp4', image: $r('app.media.tiyu2') },
    { name: '体育3', source: 'shipin/tiyu3.mp4', image: $r('app.media.tiyu3') }
  ]
};
5、在resources中的media，添加几张图片

,添加的图片分别是donghua1，donghua2，donghua3，panda1，panda2，panda3，tiyu1，tiyu2，tiyu3