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="" y="" width="" height="" 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="" verticalCenter=""/>
                </e:Skin>
            </e:skinName>
        </e:RadioButton>
        <e:RadioButton label="选项2" x="" y="" width="" height="" 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="" verticalCenter=""/>
                </e:Skin>
            </e:skinName>
        </e:RadioButton>
        <e:RadioButton label="选项3" x="" y="" width="" height="" 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="" verticalCenter=""/>
                </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;
    }
}

实际效果：