Ⓔeui.Panel 用法

提示視窗範例

建立 TipsDialog 組件（TipsDialogSkin.exml, TipsDialog.ts, default.thm.json 建立關聯）

TipsDialogSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.TipsDialogSkin" 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>

TipsDialog.ts

namespace edwin {

    // 繼承 eui.Panel
    export class TipsDialog extends eui.Panel {

        // 設置提示窗訊息, <edwin:TipsDialog id="dg_tips" title="遊戲彈窗" info="遊戲已結束" btnLabel="確定" 
        // 屬性可以直接在標籤屬性上使用
        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.anchorOffsetX = this.width / 2;
            this.anchorOffsetY = this.height / 2;
            // 加入場景就跑動畫
            this.addEventListener(eui.UIEvent.ADDED_TO_STAGE, () => {
                egret.Tween.get(this).set({
                    scaleX: 0,
                    scaleY: 0
                }).to({
                    scaleX: 1,
                    scaleY: 1
                }, 500, egret.Ease.backOut);
            }, this);
            this.dispatchEventWith(eui.UIEvent.ADDED_TO_STAGE); // 讓他一開始就跑一次彈窗動畫
        }

    }

}

建立關聯

"edwin.TipsDialog": "resource/game_skins/TipsDialogSkin.exml"

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui" xmlns:edwin="edwin.*">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Button id="btn" label="show" />
    <edwin:TipsDialog id="dg_tips" title="遊戲彈窗" info="遊戲已結束" btnLabel="確定" width="400" height="200" horizontalCenter="0"
                      verticalCenter="0" />
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private btn: eui.Button;
        private dg_tips: edwin.TipsDialog;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;

            this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
                // panel 關閉後會被父物件 removeChild, 如果沒有父物件就加入場景
                this.dg_tips.parent == null && this.addChild(this.dg_tips);
            }, this);
        }

    }

}