在 [层叠容器](../../container/viewStack/README.md) 章节，我们介绍了 ViewStack，而本节介绍的 TabBar 可以用来控制 ViewStack 的显示。TabBar 会根据数据源，显示一组按钮，并且在同一时间，只有一个按钮会被选中，并且如果数据源是一个ViewStack 的话，那么 TabBar 的选中项索引将和 ViewStack 的选中项索引保持一致。
## 用法1：结合ViewStack
修改 [层叠容器](../../container/viewStack/README.md) 章节的例子，不再用 timer 控制 ViewStack 的切换，而是绑定到 TabBar 上面：
~~~ typescript
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 = `
`;
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 的选中项。示例代码：
~~~ typescript
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 = `
`;
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);
}
}
~~~
效果：
