flex Spark标签栏滚动索引

Question

我正在使用spark标签栏，并提供了一个视图堆栈作为dataprovider .....在视图堆栈中有n个元素...并且每个元素都有一个面板....

我的代码将是这样的。

<s:tabbar dataprovider = {viewstck-id}  height="100%" width="100%"/>
<viewstack id="viewstck-id">
<navigatorContent >
     <s:panel title="title - 1"/>
 </navigatorContent >
 <navigatorContent >
     <s:panel title="title - 2"/>
 </navigatorContent >\ 
 <navigatorContent >
     <s:panel title="title - 3"/>
 </navigatorContent >

我的要求是这样的……最初，“选择”选项卡的面板应显示其自己的标题。.假设我们在选项卡1上，标题应为“标题1” ...但是当我们将鼠标悬停在将鼠标移至选项卡2上时，选项卡1中的面板标题应更改为标题2；如果鼠标位于选项卡3上，则应将选项卡1中面板的标题更改为标题3，并在展开时将其更改为标题3。更改为选定选项卡面板的标题，即title-1 ....，并且类似地，它应适用于所有选项卡....

因此，有什么方法可以获取选项卡的rollOverIndex或有人可以为我提供解决方案。

-感谢Red

Answer 1

使用Spark TabBar，您可以尝试在MouseEvent.MOUSE_OVER上添加一个事件侦听器 ，然后检查event.target.label以获得标签名称和event.target.itemIndex作为鼠标悬停的标签的索引。

Answer 2

好吧，我的想法是使用ItemRenderer子类来处理roll_over事件并获取项目索引。 默认情况下，TabBar项目渲染器是具有TabBarButtonSkin外观的ButtonBarButton类。 并且ButtonBarButton类具有itemIndex属性。 我们开始做吧：

---> MyButtonBarItemRenderer.mxml的代码

<?xml version="1.0" encoding="utf-8"?>
<s:ButtonBarButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                creationComplete="creationCompleteHandler(event)"
                skinClass="spark.skins.spark.TabBarButtonSkin"
                >
    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            }

            private function rollOverHandler(e:MouseEvent) : void
            {
                var tbe:MyTabBarEvent = new MyTabBarEvent(MyTabBarEvent.ITEM_ROLL_OVER, true);
                tbe.itemIndex = this.itemIndex;
                dispatchEvent(tbe);
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

在这里，我们使用带有itemIndex属性的自定义事件：

---> MyTabBarEvent.as的代码放在“事件”包中

package events
{
    import flash.events.Event;

    public class MyTabBarEvent extends Event
    {
        public static const ITEM_ROLL_OVER:String = "MyTabBarEvent.ItemRollOver";

        public var itemIndex:int;

        public function MyTabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

现在我们要做的就是在应用程序中处理自定义事件：

--->申请代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="creationCompleteHandler(event)"
               >

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                tabBar.addEventListener(MyTabBarEvent.ITEM_ROLL_OVER, itemRollOverHandler);
            }

            protected function itemRollOverHandler(e:MyTabBarEvent) : void
            {
                trace ("Item " + e.itemIndex + " roll over event handled");
                tabBar.selectedIndex = e.itemIndex;
            }

        ]]>
    </fx:Script>


    <s:VGroup>
        <s:TabBar id="tabBar" dataProvider="{viewstckId}" width="100%" itemRenderer="MyButtonBarItemRenderer"/>
        <mx:ViewStack id="viewstckId">
            <s:NavigatorContent label="Title 1">
                <s:Panel title="title - 1"/>
            </s:NavigatorContent >
            <s:NavigatorContent label="Title 2">
                <s:Panel title="title - 2"/>
            </s:NavigatorContent> 
            <s:NavigatorContent label="Title 3">
                <s:Panel title="title - 3"/>
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:VGroup>
</s:Application>