eui-eui.Checkbox

eui.Checkbox 使用範例

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%">
        <e:Group horizontalCenter="0" verticalCenter="0">
            <!-- 使用 CheckBox 元件 -->
            <e:CheckBox id="myCheckBox">
                <!-- 自訂義皮膚 -->
                <e:Skin states="up,down,disabled,upAndSelected,downAndSelected,disabledAndSelected">
                    <!-- 可以用圖片來做框框,這邊用 Rect 做框框 -->
                    <e:Rect fillColor="0xCCCCCC" width="50" height="50" horizontalCenter="0" verticalCenter="0" />
                    <e:Rect fillColor="0xFFFFFF" width="40" height="40" horizontalCenter="0" verticalCenter="0" />
                    <!-- 垂直置中的✔, 這裏只設定 up 跟 upAndSelected 狀態 -->
                    <e:Label text.up="" text.upAndSelected="✔" size="45" textColor="0xCCCCCC" stroke="3"
                             strokeColor="0xFFFFFF" horizontalCenter="0" verticalCenter="0" />
                </e:Skin>
            </e:CheckBox>
            <e:Label text="是否訂閱" />
            <!-- 設定水平排版, CheckBox 跟 是否訂閱文字 間隔 10px, 並且垂直置中 -->
            <e:layout>
                <e:HorizontalLayout gap="10" verticalAlign="middle" />
            </e:layout>
        </e:Group>
    </e:Group>
</e:Skin>

ts 部分

class My extends eui.Component {

    /** 可直接取用 id 元件 */
    private myCheckBox: eui.CheckBox;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;
        // 綁定事件
        this.myCheckBox.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent) => egret.log(evt.target.selected), this);
    }

}