Ⓔeui.Checkbox 用法

Checkbox 自訂義皮膚

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%">
        <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>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private myCheckBox: eui.CheckBox;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
            // 註冊 CHANGE 事件, 當點擊 CheckBox 時會觸發
            this.myCheckBox.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent) => egret.log(evt.target.selected), this);
        }

    }

}