eui-eui.Component

eui.Component 為下列物件之基類（父類）, 基本上用來繼承：

• eui.Button
• eui.CheckBox
• eui.HScrollBar
• eui.HSlider
• eui.Panel
• eui.RadioButton
• eui.Range
• eui.Rect
• eui.Scroller
• eui.SliderBase
• eui.TextInput
• eui.ToggleButton
• eui.ToggleSwitch
• eui.VScrollBar
• eui.VSlider

請參考繼承圖

我們通常用 eui.component 來自定義組件

ts 部分

class MyDialog extends eui.Component {

    protected createChildren() {
        super.createChildren();
        // 跟 MyDialogSkin 建立關聯
        this.skinName = skins.MyDialogSkin;
    }

}

exml 部分

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MyDialogSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
</e:Skin>

元件加到場景

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

        this.addChild(new MyDialog);
    }

}