egret-docs-master/extension/EUI/dataCollection/tabBar/README.md

在 层叠容器 章节，我们介绍了 ViewStack，而本节介绍的 TabBar 可以用来控制 ViewStack 的显示。TabBar 会根据数据源，显示一组按钮，并且在同一时间，只有一个按钮会被选中，并且如果数据源是一个ViewStack 的话，那么 TabBar 的选中项索引将和 ViewStack 的选中项索引保持一致。

用法1：结合ViewStack

修改 层叠容器 章节的例子，不再用 timer 控制 ViewStack 的切换，而是绑定到 TabBar 上面：

class TabBarDemo extends eui.Group {
    constructor() {
        super();
    }
    protected createChildren(): void {
        super.createChildren();
        var theme = new eui.Theme(`resource/default.thm.json`, this.stage);
        var exml = `
        <e:Skin xmlns:e="http://ns.egret.com/eui" states="up,down" height="50"> 
            <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0" verticalCenter="0"/> 
        </e:Skin>`;
        var tabBar = new eui.TabBar();
        var viewStack = new eui.ViewStack();
        viewStack.y = 100;
        //创建 3 个 group ,每个 group 里面有 1 个按钮
        for (var i: number = 0; i < 3; i ++) {
            var group: eui.Group = new eui.Group();
            group.name = "Group" + i;
            var btn: eui.Button = new eui.Button();
            btn.label = "Button" + i;
            group.addChild(btn);
            viewStack.addChild(group);
        }
		//将 tabBat 的数据源设置为 viewStack
        tabBar.dataProvider = viewStack;
        tabBar.itemRendererSkinName = exml;
        viewStack.selectedIndex = 1;
        this.addChild(viewStack);
        this.addChild(tabBar);
    }
}

上面代码中为循环产生的group设置了名称(通过name属性)，这样TabBar的显示，就可以根据Group的名称来做。由于ViewStack实现的是ICollection接口，它默认会取子项的name属性，就是说，想显示在TabBar的文本，必须写在子项的name属性上。

通过设置 TabBar.dataProvider 等于 ViewStack 实例，来实现两者的绑定。

效果：

用法2：结合ArrayCollection

TabBar 也可以单独使用的，将数据源设置为一个 ArrayCollection 实例即可。并且可以通过侦听 ITEM_TAP 事件，来获取 TabBar 的选中项。示例代码：

class TabBarDemo extends eui.Group {
    constructor() {
        super();
    }
    protected createChildren(): void {
        super.createChildren();
        var theme = new eui.Theme(`resource/default.thm.json`, this.stage);
        var exml = `
        <e:Skin xmlns:e="http://ns.egret.com/eui" states="up,down" height="50"> 
            <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0" verticalCenter="0"/> 
        </e:Skin>`;
        var tabBar = new eui.TabBar();
        tabBar.dataProvider = new eui.ArrayCollection(["tab1", "tab2", "tab3"]);
        tabBar.itemRendererSkinName = exml;
        this.addChild(tabBar);
        tabBar.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.onBarItemTap, this);
    }
    private onBarItemTap(e: eui.ItemTapEvent): void {
        console.log(e.itemIndex);
    }
}

效果：