Comportement étrange de défilement dans flex mobile

Question

travaillant sur la liste mobile Flex. La liste est représentée en utilisant itemrenderer. ici est le itemrendeerer ..

<s:Image id="img" x="30" y="50"/> 
     <s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle"/> 
     <s:Button id="checkMarkLabel" label="+" height="100%" /> 

sur sélectionné ::

protected function onClicked(event:MouseEvent):void 
      { 
       if(checkMarkLabel.label =="✓") 
       { 
        checkMarkLabel.label = "+"; 
       } 
       else if(checkMarkLabel.label == "+") 
       { 
        checkMarkLabel.label = "✓"; 
        trace("id::"+event.currentTarget.data.id) 
        //FlexGlobals.topLevelApplication.selectedId = event.currentTarget.data.id; 
       } 

      } 

l'image vous donne l'image claire. après avoir sélectionné certains éléments dans la liste, si je fais défiler la liste, les éléments cochés sont décochés et les éléments non vérifiés sont vérifiés. Toute réponse est appréciable ..

Answer 1

Flex ne crée pas de rendu pour chaque élément de la liste au lieu de Flex créer peu de moteurs de rendu (dans votre cas 6) et réutiliser eux. Vous devez enregistrer des données sur les éléments de la liste cliqués (utilisez peut-être un singleton), puis vous devez remplacer la méthode set data dans la classe renderer (dans cette méthode vous obtenez l'élément de liste pour renderer), puis cliquez sur cet élément ou pas et défini sur checkMarkLabel correspond au symbole.

Answer 2

Dans la liste, vous pouvez définir la propriété "useVirtualLayout" sur false. Cela générera un itemrenderer unique pour chaque élément de la liste. C'est aussi ce dont parlait Anton. Ceci est cependant moins convivial. Si votre liste est vraiment grande, elle prendra plus de mémoire.

Vous devriez travailler avec les états qui sont déjà utilisés par des listes en combinaison avec itemrenderers.

Exemple itemRenderer:

<fx:Script> 
    <![CDATA[ 
     protected function marker_clickHandler(event:MouseEvent):void { 
      marker.label = marker.label == "V" ? "+" : "V"; 
     } 
    ]]> 
</fx:Script> 

<s:states> 
    <s:State name="normal"/> 
    <s:State name="selected"/> 
</s:states> 

<s:Button label.selected="V" label.normal="+"/> 
<s:Button y="10" id="marker" click="marker_clickHandler(event)" label="+"/> 

Si vous deviez utiliser comme un itemRenderer, le bouton en utilisant les états mettra à jour comme prévu, mais comme Anton mentionné, ceux marqués manuellement onClick ne soient mis à jour comme prévu.

Answer 3

Cette réponse se base sur la réponse de Robin van den Bogaard.

En supposant que votre dataProvider actuelle a des objets qui ressemblent à ceci:

public class MyData { 
    [Bindable] 
    private var imgUrl:String; 
    [Bindable] 
    private var name:String; 
} 

Ajouter un nouveau champ à elle:

[Bindable] 
    private var chosen:Boolean; 

(Si vous n'avez pas [Bindable], ajoutez pour activer les données liaison sur les éléments de données.)

Ensuite, votre itemRenderer peut ressembler à ceci, mise à jour automatique que vous faites défiler:

<fx:Script> 
    <![CDATA[ 
     protected function marker_clickHandler(event:MouseEvent):void { 
      data.chosen = !data.chosen; 
     } 
    ]]> 
</fx:Script> 

<s:states> 
    <s:State name="normal"/> 
    <s:State name="selected"/> 
</s:states> 

<s:Image id="img" x="30" y="50" source="{data.imgUrl}" /> 
    <s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle" text="{data.name}" /> 
    <s:Button id="checkMarkLabel" label="{data.chosen ? '✓' : '+'}" height="100%" click="marker_clickHandler(event)" />