Ⓔeui.Button 用法

自訂義 Button 皮膚方式

準備兩張圖片並丟到 preload 資源組產生 button_u_png 與 button_d_png 資源

 按鈕預設圖片 button_u.png 按鈕按下圖片 button_d.png

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <!-- Group 繼承自 DisplayObjectContainer 所以擁有加入子物件特性. 這裡設定滿版 -->
    <e:Group width="100%" height="100%">
        <!-- 使用 Button 元件 -->
        <e:Button id="myButton">
            <!-- 自定義皮膚, 這裡有兩個狀態 up, down, 其實還有 disabled, 這裡不添加 -->
            <e:Skin states="up,down">
                <!-- 按鈕寬高 300x100 -->
                <e:Group width="300" height="100">
                    <!-- 按鈕底圖為圖片, source.up 用 button_u_png, source.down 用 button_d_png -->
                    <e:Image source.up="button_u_png" source.down="button_d_png" width="100%" height="100%" />
                    <!-- 按鈕上想要有文字, 文字垂直置中於 Group -->
                    <e:Label text="按鈕" size="45" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
            </e:Skin>
        </e:Button>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private myButton: eui.Button;

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

            this.myButton.addEventListener(egret.TouchEvent.TOUCH_TAP, () => console.log('click!'), this);
        }

    }

}

如果想要動態設置按鈕文字

必須要在 MainUISkin.exml 設置 e:Label, 把 text="按鈕" 拿掉並補上 id="labelDisplay"

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <!-- Group 繼承自 DisplayObjectContainer 所以擁有加入子物件特性. 這裡設定滿版 -->
    <e:Group width="100%" height="100%">
        <!-- 使用 Button 元件 -->
        <e:Button id="myButton">
            <!-- 自定義皮膚, 這裡有兩個狀態 up, down, 其實還有 disabled, 這裡不添加 -->
            <e:Skin states="up,down">
                <!-- 按鈕寬高 300x100 -->
                <e:Group width="300" height="100">
                    <!-- 按鈕底圖為圖片, source.up 用 button_u_png, source.down 用 button_d_png -->
                    <e:Image source.up="button_u_png" source.down="button_d_png" width="100%" height="100%" />
                    <!-- 文字垂直置中於 Group -->
                    <!-- 想要由 Button 控制文字, 必須要補上 id = labelDisplay, text 屬性可以刪掉 -->
                    <e:Label id="labelDisplay" size="45" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
            </e:Skin>
        </e:Button>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private myButton: eui.Button;

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

            this.myButton.label = "我是按鈕";
            this.myButton.addEventListener(egret.TouchEvent.TOUCH_TAP, () => console.log('click!'), this);
        }

    }

}