Skip to content

Latest commit

 

History

History
executable file
·
85 lines (67 loc) · 3.3 KB

File metadata and controls

executable file
·
85 lines (67 loc) · 3.3 KB

层叠容器 章节,我们介绍了 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);
    }
}

效果: