flex Spark选项卡栏翻转索引

Question

我使用的是火花选项卡并将视图堆栈作为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中的面板的标题应该被更改为tittle-2，如果鼠标在tab3上，tab-1中面板的标题应该改为tittle-3，在推出时它应该改为选定标签的面板标题，即title-1 ... 。并以类似的方式，它应该工作的所有标签.....

所以有什么办法来获得标签的rollOverIndex或有人请给我一个解决方案。

- 感谢 红

Answer 1

好，我的想法是使用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> 

Answer 2

随着星火的TabBar的代码，你可以尝试在添加事件侦听器的MouseEvent.MOUSE_OVER，然后检查event.target.label获取标签名称和event.target.itemIndex为鼠标悬停在上的选项卡的索引。