eui-eui.IDisplayText

eui.IDisplayText 使用範例

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

        // 有三個類實現 IDisplayText text 屬性
        // 包含 eui.Label, eui.EditableText, eui.BitmapLabel

        const lb = new eui.Label;
        lb.text = 'test';

        const et = new eui.EditableText;
        et.text = 'test';

        const bl = new eui.BitmapLabel;
        bl.text = 'test';

        // IDisplayText 接口的實作可以套用上述三個類, 在 skin 設計上可以選用
        // 簡單來說 skin 上 id 為 labelDisplay 或是 titleDisplay 的 Label 
        // 都可以置換成 EditableText 或是 BitmapLabel 標籤,
        // 這樣一來 eui.Button 上的顯示文字也可以是圖片文字

        const btn = new eui.Button;
        btn.labelDisplay // 此為 IDisplayText 接口

        const pn = new eui.Panel;
        pn.titleDisplay // 此為 IDisplayText 接口

    }

}

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"/>
    <!-- <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
             size="20"
             textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/> -->
    <!-- 採用圖片文字 -->
    <e:BitmapLabel id="labelDisplay" top="8" bottom="8" left="8" right="8" 
                    verticalAlign="middle" textAlign="center"/>
    <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>