Question

我有一个应用程序，我正在尝试根据用户将鼠标悬停在其上的标签更新Label的文本属性的字符串。我构建了一个简单的示例，显示如果我将使用selectedIndex属性我将如何处理eventHandler函数，但是它是具有鼠标焦点的选项卡，可能是也可能不是selectedItem，我想参考一下，但我还没有找到办法。

所以这是一个例子：

<s:Label 
    id="descriptionLabel"
    />
<s:TabBar 
    id="audioTB"
    dataProvider="{audioVS}"
    mouseOver="audioTB_mouseOverHandler(event)"
    rollOut="audioTB_rollOutHandler(event)"
    />
<mx:ViewStack 
    id="audioVS"
    >
    <!--- Menu1 -->
    <s:NavigatorContent
        id="audioNC1"
        label="Audio Menu 1"
        >
        <mx:DataGrid
            id="audioDG1"
            />
    </s:NavigatorContent>
    <!--- Menu2 -->
    <s:NavigatorContent
        id="audioNC2"
        label="Audio Menu 2"
        >
        <mx:DataGrid
            id="audioDG2"
            />
    </s:NavigatorContent>
    <!--- Menu3 -->
    <s:NavigatorContent
        id="audioNC3"
        label="Audio Menu 3"
        >
        <mx:DataGrid
            id="audioDG3"
            />
    </s:NavigatorContent>
</mx:ViewStack>
</s:Application>

任何建议都将不胜感激。

谢谢，〜尼

Answer 1

我建议您使用标签栏按钮的自定义事件来解决此问题：

package 
{
    import flash.events.Event;

    public class TabButtonEvent extends Event
    {
        public static const TAB_IS_OVER:String = "tabIsOver";

        private var _tabLabel:String;

        public function TabButtonEvent(type:String, tabLabel:String)
        {
            super(type,true,false);
            this._tabLabel = tabLabel;
        }

        public function get tabLabel():String
        {
            return _tabLabel;
        }

        public override function clone():Event
        {
            return new TabButtonEvent(type,tabLabel);
        }
    }
}

然后你应该创建自定义标签栏按钮皮肤。好消息是你可以使用继承：

package
{
import spark.skins.spark.TabBarButtonSkin;
import mx.events.StateChangeEvent;

public class TabBarButtonSkinExt extends TabBarButtonSkin
{
    public function TabBarButtonSkinExt()
    {
        super();
        addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, currentStateChangeHandler);
    }

    private function currentStateChangeHandler(event:StateChangeEvent):void
    {
        if (event.newState.toLowerCase().indexOf("over") > -1)
        {
            dispatchEvent(new TabButtonEvent(TabButtonEvent.TAB_IS_OVER, hostComponent.label));
        }
    }
}
}

并在标签栏皮肤中包含此按钮（没有继承，抱歉）：

<?xml version="1.0" encoding="utf-8"?>
<!-- TabBarSkinExt.mxml -->
<s:Skin alpha.disabled="0.5" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TabBar")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
    <![CDATA[
        import mx.core.UIComponent;

        /**
         *  @private
         *  Push the cornerRadius style to the item renderers.
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
        {
            const numElements:int = dataGroup.numElements;
            const cornerRadius:int = hostComponent.getStyle("cornerRadius");
            for (var i:int = 0; i < numElements; i++)
            {
                var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
                if (elt)
                    elt.setStyle("cornerRadius", cornerRadius);
            }

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

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

现在你的申请：

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function audioTB_rollOutHandler(event:MouseEvent):void
        {
            descriptionLabel.text = " ";
        }

        protected function audioTB_initializeHandler(event:FlexEvent):void
        {
            audioTB.addEventListener(TabButtonEvent.TAB_IS_OVER, audioTB_tabIsOverHandler);
        }

        private function audioTB_tabIsOverHandler(event:TabButtonEvent):void
        {
            descriptionLabel.text = event.tabLabel;
            event.stopImmediatePropagation();
        }
    ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Label id="descriptionLabel" />
    <s:TabBar dataProvider="{audioVS}" id="audioTB"
        rollOut="audioTB_rollOutHandler(event)" skinClass="TabBarSkinExt" initialize="audioTB_initializeHandler(event)" />
    <mx:ViewStack id="audioVS">
        <!--- Menu1 -->
        <s:NavigatorContent id="audioNC1" label="Audio Menu 1">
            <mx:DataGrid id="audioDG1" />
        </s:NavigatorContent>
        <!--- Menu2 -->
        <s:NavigatorContent id="audioNC2" label="Audio Menu 2">
            <mx:DataGrid id="audioDG2" />
        </s:NavigatorContent>
        <!--- Menu3 -->
        <s:NavigatorContent id="audioNC3" label="Audio Menu 3">
            <mx:DataGrid id="audioDG3" />
        </s:NavigatorContent>
    </mx:ViewStack>
</s:Application>

希望这有帮助！

Flex 4：确定TabBar mouseOver的索引（不是selectedIndex）

1 个答案: