eui-eui.IOverride

IOverride 接口定義視圖狀態的覆蓋操作。 State 類 overrides 屬性數組中的所有條目均必須實現此接口。IOverride 有三個實現類, 分別是：

• eui.AddItems 標籤屬性 includeIn 添加狀態
• eui.SetProperty 標籤屬性.狀態
• eui.SetStateProperty 標籤屬性.狀態="{xxxx}" 採動態綁定時

先來觀察 IOverride 是在程式的什麼部分運用, eui.IOverride 使用範例

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

        // 建立按鈕
        const btn = new eui.Button;
        // 設置文字
        btn.label = 'state check!';
        // 顯示於場景
        this.addChild(btn);
        // 遍歷按鈕皮膚狀態
        btn.skin.states.forEach(state=>{
            console.log(state.name, state.overrides); // IOverride 陣列
        })
    }

}

這是按鈕元件在各視圖狀態的覆蓋操作的值, 我要觀察 AddItems 怎麼加到 state.overrides 陣列, 先打開 ButtonSkin.exml 做修改

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">
    <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"
             source="button_up_png"
             source.down="button_down_png"/>
    <!--加上 includeIn="down"-->
    <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
             size="20"
             textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"
             includeIn="down"/>
    <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>

會發現 down 狀態多了 AddItems 類

我要觀察 SetProperty 怎麼加到 state.overrides 陣列, 打開 ButtonSkin.exml 做修改

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">
    <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"
             source="button_up_png"
             source.down="button_down_png"/>
    <!-- 加上 textColor.down="0xFF0000" -->
    <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
             size="20"
             textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"
             textColor.down="0xFF0000"/>
    <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>

我要觀察 SetStateProperty 怎麼加到 state.overrides 陣列, 打開 ButtonSkin.exml 做修改

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">
    <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"
             source="button_up_png"
             source.down="button_down_png"/>
    <!-- 加上 textColor.down="{'0xFF0000'}" -->
    <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
             size="20"
             textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"
             textColor.down="{'0xFF0000'}"/>
    <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>