eui-eui.Button

eui.Button 使用範例

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

 按鈕預設圖片 button_u.png

 按鈕按下圖片 button_d.png

exml 部分

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" 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" verticalCenter="0" horizontalCenter="0" width="300" height="100">
            <!-- 自定義皮膚, 這裡有兩個狀態 up, down, 其實還有 disabled, 這裡不添加 -->
            <e:Skin states="up,down">
                <!-- Group 滿版, 寬高由組件屬性定義 -->
                <e:Group width="100%" 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>

ts 部分

class My extends eui.Component {

    /** 可直接取用 id 元件 */
    private myButton: eui.Button;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;
        // 綁定事件
        this.myButton.addEventListener(egret.TouchEvent.TOUCH_TAP, () => console.log('clicked!'), this);
        // 如果想要動態設置按鈕文字, 把 text="按鈕" 改成內置 id="labelDisplay"
        // this.myButton.label = 'Hi'; // 即可換按鈕文字, 關於內置 id 直接參考 ButtonSkin.exml
    }

}