eui-eui.State

當版面類似時可以自訂義 states 與切換 state, 這是常用功能, 可以部分換皮膚, state1 為紅底, state2 為綠底.

exml 部分

<?xml version='1.0' encoding='utf-8'?>
<!-- 定義 state1,state2 -->
<e:Skin class="skins.MySkin" states="state1,state2" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group width="100%" height="100%">
        <!-- 用.state1 .state2 設定不同顏色 -->
        <e:Rect fillColor.state1="0xFF0000" fillColor.state2="0x00FF00" width="100%" height="100%" />
        <e:Group>
            <e:Button id="btn_state1" label="state1" />
            <e:Button id="btn_state2" label="state2" />
            <e:layout>
                <e:HorizontalLayout />
            </e:layout>
        </e:Group>
        <!-- 用 includeIn 設定 state = state1 時顯示 -->
        <e:Group horizontalCenter="0" verticalCenter="0" includeIn="state1">
            <e:Label text="state1 wow1" />
            <e:Label text="state1 wow2" />
            <e:Label text="state1 wow3" />
            <e:Label text="state1 wow4" />
            <e:layout>
                <e:VerticalLayout />
            </e:layout>
        </e:Group>
        <!-- 用 includeIn 設定 state = state2 時顯示 -->
        <e:Group horizontalCenter="0" verticalCenter="0" includeIn="state2">
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:layout>
                <e:VerticalLayout />
            </e:layout>
        </e:Group>
    </e:Group>
</e:Skin>

typescript 部分

class My extends eui.Component {

    /** id 可以直接引用 */
    private btn_state1: eui.Button;
    private btn_state2: eui.Button;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;

        // 切換狀態
        this.btn_state1.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.currentState = "state1", this);
        this.btn_state2.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.currentState = "state2", this);
    }

}