ItemRenderer對象更改屬性

Question

模糊標題的道歉。我想不出用更少的話來說出更好的方法。

基本上，我正在創建一個自定義ItemRenderer（IR）。 IR的左側有一個標籤，右側有一個圖標。右側的圖標是動態的（可以是添加或刪除圖標，也可以是任何圖標）。這工作很好，給我我需要的控制。

現在，問題是，當我在我的移動應用程序中滾動列表時，圖標會改變。

應該怎麼看：

如何它看起來通過拖動Test3的使用手指（或鼠標仿真器）滾動後：

正如你可以看到，圖標改變，但標籤不。我在我的Spark List組件上有dragEnabled，dropEnabled和dragMoveEnabled都設置爲false。圖標選擇運行的唯一時間是creationComplete，所以在某個點上它沒有辦法選擇不同的圖標。我也可以驗證數據本身是在發生這種變化後應該是什麼。

下面是創建項目的MXML：用於選擇

<s:HGroup width="100%" verticalAlign="middle" left="{this.sideSpacing}" right="{this.sideSpacing}" top="{this.sideSpacing}" bottom="{this.sideSpacing}"> 
    <s:Label id="text" width="100%"/> 

    <s:Image id="actionIcon" buttonMode="true" click="actionIconClick(event);"> 
     <s:filters> 
      <s:DropShadowFilter alpha=".45" angle="90" distance="3" blurX="3" blurY="3" quality="3"/> 
     </s:filters> 
    </s:Image> 
</s:HGroup> 

<s:Rect width="100%" height="1" bottom="0" alpha=".1"> 
    <s:fill> 
     <s:SolidColor color="#000000"/> 
    </s:fill> 
</s:Rect> 

而且可能過於複雜的AS3應顯示的圖標：

private function creationComplete(e:Event):void { 
    if (this.data.actionIcon != null) { 
     this.actionIconType = this.data.actionIcon; 
     if (this.data.actionIcon == ACTION_ICON_ADD) { 
      this.actionIcon.source = this.addBitmapSource; 
     } 
     else if (this.data.actionIcon == ACTION_ICON_REMOVE) { 
      this.actionIcon.source = this.removeBitmapSource; 
     } 
     else { 
      this.actionIcon.source = null; 
      this.actionIcon.visible = false; 
      this.actionIcon.includeInLayout = false; 
     } 
    } 
    else { 
     this.actionIcon.source = null; 
     this.actionIcon.visible = false; 
     this.actionIcon.includeInLayout = false; 
    } 
} 

什麼可能會造成這個問題？

Answer 1

基本上，當dataChange事件觸發時，您需要更新渲染器的標籤和圖標。 CreationComplete只會觸發一次。該列表並未真正滾動，只是itemRenderer中的數據發生了變化;導致它看起來像滾動。我把這個渲染器稱爲回收。

這是我爲移動應用程序創建的一個組件，它可以滿足您的需求。它顯示一個標籤和一個圖標（AKA裝飾）。滾動標籤和圖標時都會更新。您可以使用非常類似的方法。

<?xml version="1.0" encoding="utf-8"?> 
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        dataChange="onDataChange(event)" alpha=".7" width="100%" cacheAsBitmap="true"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import com.dotcomit.magondaMaze.managers.BoardDataManager; 
      import com.dotcomit.magondaMaze.managers.StatManager; 

      import mx.events.FlexEvent; 

      [Embed(source="assets/images/chooseLevel/completed78x78.png")] 
      private var completedImage:Class;        

      public var statManager :StatManager = StatManager.instance;  


      protected function onDataChange(event:FlexEvent):void 
      { 
       var itemAsXML :XML = data as XML; 
       var results :String = itemAsXML.@id + '. ' + itemAsXML.@title; 
       label = results; 
       if(statManager.isBoardComplete(itemAsXML.@id)){ 
        this.decorator = completedImage; 
       } else { 
        this.decorator = null; 
       } 
      } 
     ]]> 
    </fx:Script> 
</s:IconItemRenderer> 

我還會補充一點，IconItemRenderer組件 - 我的代碼在上面擴展 - 設計用來完成你所需要的。所以，你可以不必重新寫輪子說話。