eui-eui.AddItems

eui.AddItems 使用範例

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 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // EXML 標籤屬性 includeIn 表示存在什麼狀態下會顯示
        // 譬如官方提供 ButtonSkin.exml 裡 states="up,down,disabled"
        // 其中 labelDisplay 我補上 includeIn="down"
        // <e:Label id="labelDisplay" ... includeIn="down"/>
        // 表示在狀態在 down 的情況下才會顯示該 label
        // 在程式碼裡就是利用 AddItems 來控制元件 includeIn 狀態
        // 以下以按鈕為例

        const btn = new eui.Button;
        btn.label = 'cool';
        this.addChild(btn);

        // 如果想觀察 includeIn 效果是否跟 AddItems 有關
        // 請先補上 includeIn 如右 <e:Label id="labelDisplay" ... includeIn="down"/>
        // 可以 console.log(btn.skin.states), 找 down state 的 overrides
        // 你會發現多出一個 AddItems
        
        // [ 動態 includeIn 實作 ]
        // 先確定 labelDisplay 出現位置
        // 希望按鈕 skin 裡的 labelDisplay 的位置在 iconDisplay 之前
        // 第三個參數 0: FIRST, 1: LAST, 2: BEFORE, 3: AFTER
        const addItem = new eui.AddItems('labelDisplay', '', 2, 'iconDisplay');
        // 在按鈕 skin 狀態中設定 includeIn 有 down 狀態
        for(const state of btn.skin.states){
            if(state.name == 'down'){
                state.overrides.push(addItem);
                break;
            }
        }
        // 手動更新狀態, 內部執行一遍 commitCurrentState 來更新狀態
        btn.skin.currentState = "down"; 
        // 切回原始狀態
        btn.skin.currentState = "up";

        // 之後這顆按鈕的狀態跟其他按鈕不一樣, 只有按下按鈕才會顯示 Label
        // 而 AddItems apply 與 remove 方法會在 commitCurrentState 內部調用, 基本上不要使用
        
    }

}