使一個選項卡在Spark中閃爍（Flex）

Question

在Flex 4應用程序（包含Spark組件）中，我有一個帶有各種屏幕的ViewStack和一個TabBar以在它們之間導航。我希望屏幕能夠在它們發生某些事情時（例如Windows任務欄按鈕）「閃爍」標籤。

我該怎麼做？我的想法是通過在閃爍時將*放入屏幕的label（繼承自NavigatorContent）閃爍狀態，並以某種方式在自定義選項卡欄皮膚中讀取該狀態。

有沒有更簡單的方法？如果現在，我該如何執行我的？

Answer 1

這有點難以解釋，因爲這不是最容易做的事情，但我會盡力而爲。我將創建一個<s:TabBar />，在您的viewstack中創建一個包含所有視圖的數組的dataProvider，併爲您的TabBar創建一個自定義項目渲染器，然後它將包含一個自定義組件，用於擴展ButtonBarButton，該組件具有雙向綁定的閃爍屬性，實際上顯示它閃爍，像這樣： （人，這是一個拗口）

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:local="*"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayList; 
     ]]> 
    </fx:Script> 
    <s:TabBar dataProvider="{new ArrayList([view1,view2])}"> 
     <s:itemRenderer> 
      <fx:Component> 
       <local:BlinkingTab label="{data.label}" blink="@{data.isBlinking}" skinClass="BlinkingTabSkin" /> 
      </fx:Component> 
     </s:itemRenderer> 
    </s:TabBar> 
    <mx:ViewStack> 
     <local:Foo id="view1" label="View 1" /> 
     <local:Foo id="view2" label="View 2" /> 
    </mx:ViewStack> 
</s:Application> 

在這種情況下，我的看法「延伸NavigatorContent」，但是，我們需要能夠表達一個布爾標誌說，標籤需要閃爍，如下所示：

<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     implements="ITabView"> 
    <fx:Script> 
     <![CDATA[ 
      private var _blink:Boolean = false; 

      [Bindable] 
      public function get isBlinking():Boolean 
      { 
       return this._blink; 
      } 

      public function set isBlinking(value:Boolean):void 
      { 
       this._blink = value; 
      } 
     ]]> 
    </fx:Script> 
</s:NavigatorContent> 

您會注意到vie w正在實施ITabView。這只是爲了類型化'isBlinking'屬性，但它是可選的。當你希望你的標籤閃爍時，你只需要將它設置爲'true'即可。但是現在我們需要讓標籤實際上閃爍。在自定義組件「BlinkingTab」我們爲的TabBar創建，我們需要適當採取眨眼財產和改變皮膚狀態，像這樣：

<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"> 
    <fx:Script> 
     <![CDATA[ 
      private var _blink:Boolean; 

      [Bindable] 
      public function get blink():Boolean 
      { 
       return this._blink; 
      } 

      public function set blink(value:Boolean):void 
      { 
       this._blink = value; 
      } 

      override protected function getCurrentSkinState():String 
      { 
       if(!selected && enabled && this._blink) 
       { 
        return super.getCurrentSkinState()+'Blinking'; 
       }else{ 
        return super.getCurrentSkinState(); 
       } 
      } 

      override protected function mouseEventHandler(event:Event):void 
      { 
       super.mouseEventHandler(event); 
       if(event.type == MouseEvent.CLICK) 
       { 
        blink = false; 
       } 
      } 
     ]]> 
    </fx:Script> 
</s:ButtonBarButton> 

你會發現，皮膚的狀態，只會有'閃爍'字符串，如果它啓用並且未選中。如果被選中，則不會閃爍;如果用戶點擊該選項卡，它將刪除應該傳播回視圖的閃爍標誌（我不確定這部分是否可以覆蓋'selected'屬性或某物）。最後一部分是皮膚;您需要創建自定義外觀，以便您可以向選項卡添加閃爍動畫。只要創建與使用TabBarButtonSkin一個ButtonBarButton主機組件新的皮膚，並添加這些新的規定：

<s:State name="upBlinking" basedOn="up" stateGroups="blinking" /> 
<s:State name="overBlinking" basedOn="over" stateGroups="blinking" /> 
<s:State name="downBlinking" basedOn="down" stateGroups="blinking" /> 

從這裏，你需要創建一個基於閃爍自己的狀態。這還沒有完全測試，但我認爲我幫助你獲得了95％的成功。希望這可以幫助。

順便說一下，這種方法是100％合法的。沒有黑客攻擊，你可以重複使用代碼中的每一個部分的其他地方:)