eui-eui.Panel

我想自定義 Panel 外觀與呈現方式如下圖

先定義皮膚 MessageBoxSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.MessageBoxSkin" minWidth="400" minHeight="200" xmlns:e="http://ns.egret.com/eui">
    <e:Rect width="100%" height="100%" fillColor="0xFFFFFF" fillAlpha="0.5" ellipseWidth="60" ellipseHeight="60" />
    <e:Rect id="masker" width="100%" height="100%" fillColor="0xFFFFFF" ellipseWidth="60" ellipseHeight="60" />
    <e:Group width="100%" height="100%" mask="{masker}">
        <!-- id = moveArea 為可移動的區塊, 如果不想移動就不要設 id -->
        <e:Group id="moveArea" width="100%" height="50">
            <e:Rect width="100%" height="100%" fillColor="0x333333" />
            <e:Label id="titleDisplay" text="Title" textColor="0" horizontalCenter="0" verticalCenter="0" />
        </e:Group>
        <e:Group width="100%">
            <!-- 提示訊息 -->
            <e:Label text="{info}" horizontalCenter="0" textColor="0" />
        </e:Group>
        <e:Group width="100%">
            <!-- id = closeButton 為關閉視窗按鈕 -->
            <e:Button id="closeButton" label="{btnLabel}" horizontalCenter="0">
                <e:Skin states="up,down,disabled">
                    <e:Rect fillColor="0xCCCCCC" width="100" height="50" ellipseWidth="20" ellipseHeight="20" />
                    <e:Label id="labelDisplay" textColor.up="0" textColor.down="0xFFFFFF" horizontalCenter="0"
                             verticalCenter="0" />
                </e:Skin>
            </e:Button>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="30" />
        </e:layout>
    </e:Group>
</e:Skin>

定義組件 MessageBox.ts

// 繼承 eui.Panel
class MessageBox extends eui.Panel {

    // 對話框訊息
    private _info: string;
    public get info(): string {
        return this._info;
    }
    public set info(v: string) {
        this._info = v;
    }

    // 按鈕文字
    private _btnLabel: string;
    public get btnLabel(): string {
        return this._btnLabel;
    }
    public set btnLabel(v: string) {
        this._btnLabel = v;
    }

    protected createChildren(): void {
        super.createChildren();
        // 建立皮膚關聯
        this.skinName = skins.MessageBoxSkin;

        // 設置動畫縮放點於中心
        this.anchorOffsetX = this.width / 2;
        this.anchorOffsetY = this.height / 2;

        // 加入場景就跑動畫
        egret.Tween.get(this).set({
            scaleX: 0,
            scaleY: 0
        }).to({
            scaleX: 1,
            scaleY: 1
        }, 500, egret.Ease.backOut);
    }

}

顯示於舞台

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

        // 建立自訂組件 MessageBox
        const msgbox = new MessageBox;
        // 水平置中於場景
        msgbox.horizontalCenter = 0;
        // 垂直置中於場景
        msgbox.verticalCenter = 0;
        // 設定文字
        msgbox.title = '遊戲彈窗';
        msgbox.btnLabel = '確定';
        msgbox.info = '遊戲已結束';
        // 顯示於舞台
        this.addChild(msgbox);

    }

}