單擊linkbaritem時，更改LinkBarItem的文本

Question

我想要創建一個自定義LinkBar，其中選中的項目在文本之前顯示一些空格或其他任何內容，如下圖所示。

當第二個項目被選中，然後兩個有一些效果，並稍微移動到左側。

當第三項被選中時，三是有一些效果，並稍微移動到左側和兩個移動在其原來的地方。

請幫我...提前

感謝

Answer 1

這個簡單的應用程序演示一個基本的方法來做到這一點與空間，它不是由一個彈頭證明y的意思，但它的工作原理，並建立在Flex SDK 3.6上。

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.events.FlexEvent; 
      import mx.events.ItemClickEvent; 
      private var _labels:Array = ["link 1", "link 2", "link 3"]; 
      private var _links:ArrayCollection = new ArrayCollection(); 

      /** 
      * Creation complete handler for linkbar. 
      * Sets up the link bar data provider. 
      * 
      * @param FlexEvent creation complete event dispatched from link bar 
      * */ 
      private function links_creationCompleteHandler(event:FlexEvent):void{ 
       resetLinks(); 
       linkBar.dataProvider = _links; 
      } 

      /** 
      * Item click handler for link bar. 
      * Checks if user has selected the same link again. 
      * If not then resets the link bar data provider with original label values. 
      * Then adds event.label with 4 leading spaces at the index of the same string in array col. 
      * Then removes the original string form the array col. 
      * 
      * @param ItemClickEvent dispatched from link bar 
      * */ 
      private function links_itemClickHandler(event:ItemClickEvent):void{ 
       if (event.label.search(" ") == -1){ 
        resetLinks(); 
        _links.addItemAt(" " + event.label, event.index); 
        _links.removeItemAt(event.index + 1); 
       } 

      } 

      /** 
      * Remove all items from the link bar data provider. 
      * Then add back in the original items to reset item labels. 
      * */ 
      private function resetLinks():void{ 
       _links.removeAll(); 
       for each (var str:String in _labels){ 
        _links.addItem(str); 
       } 
      } 

     ]]> 
    </mx:Script> 

    <mx:LinkBar id="linkBar" 
       direction="vertical" 
       creationComplete="links_creationCompleteHandler(event)" 
       width="100" 
       itemClick="links_itemClickHandler(event)"/> 
</mx:Application> 

總之，它只是在所選項目標籤的前面添加了一些空格。它通過每次鏈接欄調度項目單擊事件時重置鏈接欄數據提供程序來完成此操作。然後爲選定的項目添加替換標籤，刪除舊標籤。

感覺有點笨拙，你可能會做一些更平滑的效果。

Answer 2

檢查了這一點，它可能是一個很好的開始：

<s:layout> 
    <s:VerticalLayout gap="10"/> 
</s:layout> 

<fx:Script> 
    <![CDATA[ 
     import mx.controls.LinkButton; 
     import mx.events.ItemClickEvent; 

     import spark.effects.animation.RepeatBehavior; 

     [Bindable] public var offset:Number = 50; 


     protected function animateLink(event:ItemClickEvent):void { 
      _resetOtherButtons(event.index); 

      var linkButton:LinkButton = event.relatedObject as LinkButton; 
      if (linkButton) { 
       var moveEffect:Move = moveEffects.getItemAt(event.index) as Move; 
       if (moveEffect) { 
        moveEffect.target = linkButton; 
        if (moveEffect.isPlaying || (linkButton.x - offset) >= linkbar.x) { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft"); 
        } else { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft") + offset; 
        } 
        moveEffect.play(); 
       } 
      } 
     } 


     protected function _resetOtherButtons(index:int):void { 
      var length:int = moveEffects.length; 
      for (var i:int=0; i < length; i++) { 
       if (i != index) { 
        var moveEffect:Move = moveEffects.getItemAt(i) as Move; 
        if (moveEffect) { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft"); 
         moveEffect.play(); 
        } 
       } 
      } 
     } 
    ]]> 
</fx:Script> 

<mx:LinkBar id="linkbar" direction="vertical" itemClick="animateLink(event)" width="100" textAlign="left"> 
    <mx:dataProvider> 
     <s:ArrayCollection> 
      <fx:String>Test1</fx:String> 
      <fx:String>Test2</fx:String> 
      <fx:String>Test3</fx:String> 
     </s:ArrayCollection> 
    </mx:dataProvider> 
</mx:LinkBar> 

<fx:Declarations> 
    <s:ArrayCollection id="moveEffects"> 
     <s:Move/> 
     <s:Move/> 
     <s:Move/> 
    </s:ArrayCollection> 
</fx:Declarations>