EUI ViewStack實現選項卡組件

 

一  TabBar+ViewStack實現

官網教程：http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/tabBar/index.html

這個教程確實沒看懂...麻煩...

 

二 RadioButton+ViewStack

 

在exml中拖動組件RadioButton和ViewStack

 

 

 

設置exml源碼RadioButton的value值為0,1... 因為這個value值將會賦值給ViewStack 。並將第一個RadioButton的seleted=true，這樣默認選中的第一項。

<e:RadioButton id="radioBtn" label="選項1" x="28" y="30" width="150" height="50" value="0" selected="true">
            <e:skinName>
                <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                </e:Skin>
            </e:skinName>
        </e:RadioButton>
        <e:RadioButton label="選項2" x="184" y="30" width="150" height="50" value="1">
            <e:skinName>
                <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                </e:Skin>
            </e:skinName>
        </e:RadioButton>
        <e:RadioButton label="選項3" x="340" y="30" width="150" height="50" value="2">
            <e:skinName>
                <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="button_up_png" source.down="button_down_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
                </e:Skin>
            </e:skinName>
        </e:RadioButton>

 

ts中監聽RadioButton的change事件，將value值傳遞給ViewStack，這樣ViewStack就可以切換Group了。

class HomScene extends eui.Component{
    private radioBtn:eui.RadioButton;
    private viewStack:eui.ViewStack;

    public constructor() {
        super();
        this.skinName = "HomeSceneSkin";
    }

    public childrenCreated(){
        this.radioBtn.group.addEventListener(eui.UIEvent.CHANGE, this.onChange ,this);
    }

    private onChange(e:eui.UIEvent){
        let radioGroup:eui.RadioButtonGroup = e.target;
        this.viewStack.selectedIndex = radioGroup.selectedValue;
    }
}

 

實際效果：