egret開発でのスクローラーとリストの使用方法

Egretの開発では、スクロールリストを作成するために、ScrollerコンポーネントとListコンポーネントを使用できます。

まず、Scroller コンポーネントを作成する必要があります。そして、そのスクロールの方向、速度、スクロールバーなどのプロパティを設定します。それから、Scroller コンポーネントをステージに追加します。

let scroller: egret.ScrollView = new egret.ScrollView();
scroller.width = 400;
scroller.height = 600;
scroller.scrollSpeed = 0.5; // 设置滚动速度
scroller.bounces = true; // 设置是否有回弹效果
this.addChild(scroller);

次にリストコンポーネントを作成し、データソースやテンプレートなどのプロパティを設定する。その後、リストコンポーネントをスクローラーコンポーネントに追加する。

let list: eui.List = new eui.List();
list.itemRenderer = ItemRenderer; // 设置列表项的渲染器
list.dataProvider = new eui.ArrayCollection(dataArray); // 设置数据源
scroller.setContent(list);

最後に、リスト項目の外観と対話動作を定義するItemRendererクラスを作成する必要があります

class ItemRenderer extends eui.ItemRenderer {
    public constructor() {
        super();
        this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onItemTap, this);
    }

    protected dataChanged(): void {
        // 设置列表项的显示内容
        this.label.text = this.data;
    }

    private onItemTap(event: egret.TouchEvent): void {
        // 处理列表项的点击事件
    }
}

以上で、ScrollerコンポーネントとListコンポーネントを使用したスクロールリストを作成する基本的な手順を説明しました。実際のニーズに応じて、リスト項目のレイアウト、スタイルなどをさらにカスタマイズできます。