flex 4 tabbar - 禁用选项卡 [英] flex 4 tabbar - disable tab

问题描述

是否有一种通用的方法可以在 flex 4 中禁用 spark tabbar 组件的选项卡?使用 mx tabnavigator 组件，您只需禁用与选项卡对应的内容，然后该选项卡也将被禁用.但是使用 spark 选项卡栏组件执行此操作只会禁用内容而不是选项卡.

is there a common way to disable a tab of a spark tabbar component in flex 4? with the mx tabnavigator component you can just disable the content corresponding to the tab and the tab is also disabled then. but doing this with the spark tab bar component disables just the content not the tab.

这是我的简单示例:

    <mx:TabNavigator x="122" y="155" width="200" height="200">
    <s:NavigatorContent label="Tab 1" width="100%" height="100%">
        <s:Label text="Label1"/>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
        <s:Label text="Label2"/>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 3" width="100%" height="100%">
    </s:NavigatorContent>
</mx:TabNavigator>
<s:TabBar x="368.7" y="100.35" dataProvider="{viewstack1}" />
<mx:ViewStack x="364" y="133" id="viewstack1" width="200" height="200">
    <s:NavigatorContent label="Tab 1" width="100%" height="100%">
        <s:Label text="Label1"/>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
        <s:Label text="Label2"/>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 3" width="100%" height="100%">
        <s:Label text="Label3" x="1" y="0"/>
    </s:NavigatorContent>
</mx:ViewStack>

很多谢谢，弗洛里安

推荐答案

附录:回到实际工作两分钟后，我发现了一个使用皮肤的优雅"解决方案.

Addendum: Literally two minutes after I got back to actually working, I found an "elegant" solution using a skin.

如果您将自定义 skinClass 应用到您的标签栏，您可以像您期望/想要的那样绑定 tab.enabled 属性.

If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/want.

<fx:Script>
    <![CDATA[
[Bindable] private var tab2IsReady:Boolean = false;

private function checkCriteria():void{
    tab2IsReady = someOtherThing.isFinished;//Boolean
}
]]>
</fx:Script>

<s:TabBar id="theTabBar"
          dataProvider="{viewStack}"
          skinClass="skins.CustomTabBarSkin"/>

<mx:ViewStack id="viewStack">
    <s:NavigatorContent label="Tab index 0">
        <!-- Your first tab's content -->
    </s:NavigatorContent>

    <s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
        <!-- Your second tab's content -->
    </s:NavigatorContent>
</mx:ViewStack>

当您键入skinClass"时，使用自动完成功能来生成(在 FlashBuilder ~4.5+???中)自定义皮肤(随意命名).代码将如下所示(我省略了 Script 标签).

When you type "skinClass" use the auto complete to generate (in FlashBuilder ~4.5+???) the custom skin (named whatever you want). The code will appear like below (I left out the Script tag).

<?xml version="1.0" encoding="utf-8"?>
<!-- skins/CustomTabBarSkin.mxml
...
Adobe's copyright & doc comments
...
-->

<s:Skin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"     
    alpha.disabled="0.5">

    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TabBar")]
        ]]>
    </fx:Metadata> 

    <!-- optional Script tag here -->

     <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

</s:Skin>
<!-- End skins/CustomTabBarSkin.mxml -->

变化:

    <fx:Component>
        <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
    </fx:Component>

致:

    <fx:Component>
        <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin"
            enabled="{data.enabled}" />
    </fx:Component>

然后任何 <s:NavigatorContent/> 在 ViewStack 及其启用的属性设置或绑定将完全符合您的期望(true 时启用，false 时禁用).

Then any <s:NavigatorContent/> in the ViewStack with its enabled property set or bound will do exactly what you expect (be enabled when true, & disabled when false).

这篇关于flex 4 tabbar - 禁用选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！