Grid Example

Horizontal card grid with two rows.

import { _decorator, Component, instantiate, Prefab, Node } from 'cc';
import { VirtualViewList } from 'assets/Script/Core/VirtualList/VirtualViewList';
import { ViewLayoutType, ScrollDirection } from 'assets/Script/Core/VirtualList/VirtualListTypes';

const { ccclass, property } = _decorator;

@ccclass('GridListExample')
export class GridListExample extends Component {
  @property(Prefab)
  cardPrefab: Prefab | null = null;

  private types: Array<string | number> = [];

  onLoad() {
    this.types = Array.from({ length: 30 }, () => 'card');
  }

  start() {
    const list = this.node.getComponent(VirtualViewList)!;

    list.RegisterTemplate('card', () => this.createCard(), true);

    list['layoutType'] = ViewLayoutType.GRID;
    list['scrollDirection'] = ScrollDirection.HORIZONTAL;
    list['rows'] = 2;
    list['girdHoriColsSpacing'] = 24;
    list['girdHoriRowsSpacing'] = 16;

    list.SetCallbacks({
      onItemInit: (node, index) => this.setupCard(node, index),
      onItemUpdate: (node, index) => this.setupCard(node, index)
    });

    list.ReloadData(this.types);
  }

  private createCard(): Node {
    if (!this.cardPrefab) {
      throw new Error('Please assign cardPrefab in the inspector.');
    }
    return instantiate(this.cardPrefab);
  }

  private setupCard(node: Node, index: number) {
    // Populate card visuals here.
  }
}

Tip: you can configure layout-related properties directly in the inspector instead of assigning them at runtime.