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爲鼠標懸停在上的選項卡的索引。