隐藏Spark TabBar中的选项卡

时间:2012-02-03 14:09:18

标签: flex tabs flex4 tabbar flex-spark

我有一个火花TabBar,我想隐藏并从外部用户输入显示它的一些元素(即复选框检查)

我无法更改标签可见性。它们目前总是显示出来。

有没有人有任何想法?我在mx TabBar上看过一个getTabAt,但是选项卡的外观很重要,要求它看起来像一个标签栏而不是一个按钮栏。

我的选项卡以及隐藏和显示的代码如下:

<fx:Script>
    <![CDATA[
    import mx.containers.VBox;
    import mx.controls.Label;

    private function onCreationComplete():void {
        var vbox1:VBox = new VBox();
        vbox1.label = "Tab 1";
        var lbl1:Label = new Label()
        lbl1.text = "Panel1";
        vbox1.addChild(lbl1);
        dp.addChild(vbox1);

        var vbox2:VBox = new VBox();
        vbox2.label = "Tab 2";
        var lbl2:Label = new Label()
        lbl2.text = "Panel 2";
        vbox2.addChild(lbl2);
        dp.addChild(vbox2);
    }

    private function showTab(event:MouseEvent):void {
        makeVisible(true);
    }

    private function hideTab(event:MouseEvent):void {
        makeVisible(false);
    }

    private function makeVisible(vis:Boolean):void {
        VBox(dp.getChildAt(0)).visible = vis;
        VBox(dp.getChildAt(0)).enabled = vis;
        VBox(dp.getChildAt(0)).includeInLayout = vis;
    }
    ]]>
</fx:Script>
<s:VGroup>
    <s:TabBar id="tabNavigator" width="100%" height="100%" dataProvider="{dp}"/>
    <mx:ViewStack width="100%" height="100%" id="dp" borderStyle="solid"/>

    <s:Button click="showTab(event)" label="show Tab"/>
    <s:Button click="hideTab(event)" label="hide Tab"/>
</s:VGroup>

任何建议都很受欢迎

由于

2 个答案:

答案 0 :(得分:3)

是的,如果没有记录这么简单的任务,真的很讨厌。我发现这篇文章,但我是关于Flex builder 4.6并针对移动应用程序(flex mobile)。 Spark TabbedViewNavigatorApplication有TabbedViewNavigator作为它的孩子。 adobe论坛和帮助只显示如何隐藏整个tabBar,这是非常明显的,但不是如何隐藏tabBar中的不同选项。

我访问的一些地方建议您在要隐藏它们时从TabbedViewNavigator中删除项目,然后使用removeItemAt,addItemAt组合再次将它们放回去......但您真的不想这样做。

第一个原因是,从tabBar中删除项目时,您将删除构成特定部分的View堆栈的ViewNavigators。

删除其中一个导航器后,您正在弄乱这个堆栈,如果您的应用程序往往处于复杂的一面,或者往往会以这种方式增长,那么您将发现编写管理所有这些删除的代码时遇到了麻烦。添加进程,请记住,TabbedViewNavigator中导航器Vector中的索引不会搞乱。

此外,如果您执行一些缓存或自定义句柄导航器属性,将它们恢复到从标签堆栈中删除它们时的状态会给您带来很多麻烦。

根据原始帖子的解决方案,并且很少尝试解决方案非常简单:

  // let say that the instance of Tabbed view navigator look like this:
  // appRef is reference to TabbedViewNavigatorApplication (if you are in the main mxml, just put "this" as reference)
  ....

  var myTabbedViewNavigator : TabbedViewNavigator = appRef.tabbedNavigator;
  var index : int = 0; // we take item at index 0 for example (1st option in tabBar)
  var dg : DataGroup = myTabbedViewNavigator.tabBar.dataGroup;
  dg.getElementAt(index).visible = false;
  dg.getElementAt(index).includeInLayout = false;

  ....

要显示标签再次显示为真,那么您的导航器仍然会在您的TabbedViewNavigator中,但它们在tabBar中的可视化表示将是不可见的。

答案 1 :(得分:1)

此功能将隐藏特定索引处的选项卡。如果你没有includeInLayout,那么标签就会消失并留下一个洞。

private function setTabEnabled(index:int, enabled:Boolean):void {
    var theTab:UIComponent = tabNavigator.dataGroup.getElementAt(index) as UIComponent;
    if (theTab)
        theTab.visible = enabled;
        theTab.includeInLayout = enabled;
    }
}