在 Spark TabBar 中隐藏选项卡答案

【问题标题】：Hiding a tab in a Spark TabBar在 Spark TabBar 中隐藏选项卡
【发布时间】：2012-02-26 03:29:04
【问题描述】：

我有一个 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>

收到的任何建议

谢谢

【问题讨论】：

相信stackoverflow.com/questions/830977/…之前已经回答了这个问题
这是为 MX 而不是火花。我可能会考虑将我的标签从 spark 转换为 mx。理想情况下，虽然我想用 spark 做到这一点
请同时发布mxml源码
问题更新了更多 mxml 代码以提供帮助

标签： apache-flex tabs flex4 tabbar flex-spark

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

是的，没有记录如此微不足道的任务真的很讨厌。我看到这篇文章，但我使用的是 Flex builder 4.6 并针对移动应用程序（flex mobile）。 Spark TabbedViewNavigatorApplication 以 TabbedViewNavigator 作为其子项。 adobe 论坛和帮助仅显示如何隐藏整个 tabBar，这非常明显，但没有显示如何隐藏 tabBar 内的不同选项。

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

第一个原因是从 tabBar 中删除项目时，您正在删除构成特定部分的视图堆栈的 ViewNavigator。

删除其中一个导航器后，您会弄乱这个堆栈，如果您的应用程序趋于复杂，或者趋向于以这种方式增长，您会发现自己在编写管理所有这些删除的代码时遇到了麻烦，并且添加进程，请记住您在 TabbedViewNavigator 中导航器向量中的索引不会被弄乱。

此外，如果您进行一些缓存或自定义句柄导航器属性，将它们恢复到您从选项卡堆栈中删除它们时的状态会让您非常头疼。

按照原帖中的解决方案，几乎没有试验，解决方案非常简单：

  // 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;

  ....

要再次显示选项卡，设置为 true，就是这样，您的导航器仍将存在于您的 TabbedViewNavigator 中，但它们在 tabBar 中的视觉表示将是不可见的。

【讨论】：