eui-eui.ToggleSwitch

 iphone 的開關鈕設計

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%" />
    <e:ToggleSwitch id="mySwitch" horizontalCenter="0" verticalCenter="0">
        <e:Skin states="up,down,disabled,upAndSelected,downAndSelected,disabledAndSelected">
            <e:Group>
                <!-- 預設灰底 -->
                <e:Rect fillColor="0x333333" width="100" height="50" ellipseWidth="50" ellipseHeight="50"
                        horizontalCenter="0" verticalCenter="0" includeIn="up,down" />
                <!-- 選中時綠底 -->
                <e:Rect fillColor="0x00FF00" width="100" height="50" ellipseWidth="50" ellipseHeight="50"
                        horizontalCenter="0" verticalCenter="0" includeIn="upAndSelected,downAndSelected" />
                <!-- 預設關閉 -->
                <e:Rect fillColor="0xFFFFFF" width="45" height="45" ellipseWidth="45" ellipseHeight="45"
                        includeIn="up,down" left="3" verticalCenter="0" />
                <!-- 選中時靠右開啟 -->
                <e:Rect fillColor="0xFFFFFF" width="45" height="45" ellipseWidth="45" ellipseHeight="45"
                        includeIn="upAndSelected,downAndSelected" right="3" verticalCenter="0" />
            </e:Group>
        </e:Skin>
    </e:ToggleSwitch>
</e:Skin>

typescript 部分

class My extends eui.Component {

    /** id 直接引用 */
    private mySwitch: eui.ToggleSwitch;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;
        // 綁定事件觀察開關狀態
        this.mySwitch.addEventListener(eui.UIEvent.CHANGE, () => console.log(this.mySwitch.selected), this);
    }

}