eui-eui.ListBase

eui.ListBase 使用範例

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // eui.List 繼承 eui.ListBase, eui.ListBase 繼承 eui.DataGroup
        // ListBase 是列表控件基類。可顯示垂直或水平的項目列表。其功能與 HTML 中的 SELECT 表單元素的功能相似。
        // 基本上用 eui.List 就好
        const lb = new eui.ListBase;
        lb.dataProvider = new eui.ArrayCollection([1, 2, 3, 4]);
        // 為 list 註冊 ItemTapEvent.ITEM_TAP 事件
        lb.addEventListener(eui.ItemTapEvent.ITEM_TAP, (e: eui.ItemTapEvent) => {
            console.log('index:', lb.selectedIndex, 'item:', lb.selectedItem);
        }, this);
        this.addChild(lb);

    }

}