Faire défiler les éléments de la liste provoque des éléments de texte pour faire défiler et

Question

J'utilise un élément de liste avec variableRowHeight et word-wrap valeur true comme dans l'exemple ci-dessous:

http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/

Quand je défiler les liste avec une souris scrollwheel le texte dans le listItems défile également. Je sais que cela a à voir avec la hauteur de textField ... mais je ne sais pas comment résoudre au mieux ce problème. Toutes les pensées sont appréciées!

Le problème que je rencontre se produit également dans l'exemple ci-dessus.

Answer 1

OK, résolu après un peu de travail. Je pensais que le mettrais ici pour d'autres:

Cela peut être simplement résolu en étendant l'élément de la liste, et le ListItemRenderer et modifier quelques lignes:

Première place, étendre l'élément de liste:

package au.com.keeghan.controls { 
    import mx.controls.List; 
    import mx.core.ClassFactory; 

    public class ExtendedList extends List{ 
     public function ExtendedList(){ 
      super(); 

      itemRenderer = new ClassFactory(ExtendedListItemRenderer); 
     } 
    } 
} 

Maintenant, nous voulons étendre le rendu d'élément nouvellement créé (ExtendedListItemRenderer). Parce qu'il n'y a pas vraiment beaucoup de code requis, nous pouvons simplement le mettre dans le même fichier .as. Nous faisons cela en le déclarant comme une classe interne, et la localisation à l'extérieur du paquet ci-dessus ... juste au-dessous du support de fermeture:

import mx.controls.listClasses.ListItemRenderer; 

internal class AsOneListItemRenderer extends ListItemRenderer{ 

    override protected function measure():void{ 
     super.measure(); 

     var w:Number = 0; 

     if (icon) 
      w = icon.measuredWidth; 

     // Guarantee that label width isn't zero 
     // because it messes up ability to measure. 
     if (label.width < 4 || label.height < 4) 
     { 
      label.width = 4; 
      label.height = 16; 
     } 

     if (isNaN(explicitWidth)) 
     { 
      w += label.getExplicitOrMeasuredWidth(); 
      measuredWidth = w; 
      measuredHeight = label.getExplicitOrMeasuredHeight(); 
     } 
     else 
     { 
      measuredWidth = explicitWidth; 

      label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3); 
      label.validateNow(); 
      label.height = label.textHeight + 5; 
      measuredHeight = label.getExplicitOrMeasuredHeight() + 3;   

      if (icon && icon.measuredHeight > measuredHeight){ 
       measuredHeight = icon.measuredHeight; 
      } 
     } 
    } 
} 

Maintenant, la majorité du code ci-dessus est en fait juste copié du ListItemRenderer , la magie se produit sur le fond ... plus précisément ces lignes:

label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3); 
label.validateNow(); 
label.height = label.textHeight + 5; 
measuredHeight = label.getExplicitOrMeasuredHeight() + 3; 

Tout ce que je fais ici est d'ajouter une certaine hauteur à la fois l'étiquette et l'ensemble measuredHeight qui à la fin est la chose qui est à l'origine de cette question . Le seul inconvénient de cette solution est que vous obtiendrez une plus grande quantité de remplissage en dessous de l'élément listItem, mais vous pouvez toujours faire en sorte que cela soit bien en jouant avec les propriétés css verticalAlign et padding.