Intervalle de défilement dans une liste Spark avec Tilelayout surdimensionné lors de l'utilisation de la molette de la souris après avoir fait défiler avec le clic

Question

J'ai une liste d'étincelles avec un rendu d'élément et une disposition de tuile.
Si je fais défiler en cliquant avec la souris sur la barre de défilement et en essayant de faire défiler avec la molette de la souris après cela, il y a un problème:

L'intervalle de défilement est surdimensionné, au lieu de faire défiler un élément vers le bas (ou vers le haut) la liste fait défiler 4 éléments vers le bas (ou vers le haut). RowHeight = 180 et columnWidth = 220 sont les dimensions de mon moteur de rendu.

Avez-vous des conseils sur ce qui ne va pas ou comment je pourrais résoudre ce problème?

Mise à jour: Ceci est un petit exemple:

La principale application:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       creationComplete="init(event)"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.events.FlexEvent; 

      [Bindable] public var items:ArrayCollection; 

      protected function init(event:FlexEvent):void{ 
       items = new ArrayCollection(); 
       for(var i:int = 0; i<200; i++){ 
        var obj:Object = new Object(); 
        obj.name = "Item "+i; 
        items.addItem(obj); 
       } 
      } 

        protected function list1_mouseWheelHandler(event:MouseEvent):void{ 
       trace("delta ="+event.delta); 
      } 
     ]]> 
    </fx:Script> 
    <s:Group width="50%" 
      height="50%"> 
     <s:List 
      dataProvider="{items}" 
      left="5" right="5" 
      top="5" bottom="5" 
      itemRenderer="MyRenderer" 
      allowMultipleSelection="false" 
      useVirtualLayout="false" 
      mouseWheel="list1_mouseWheelHandler(event)" 
      > 
      <s:layout> 
       <s:TileLayout 
        columnAlign="justifyUsingWidth" 
        rowAlign="justifyUsingGap" 
        orientation="rows" 
        rowHeight="180" 
        columnWidth="220" 
        clipAndEnableScrolling="true" 
        /> 
      </s:layout> 
     </s:List> 
    </s:Group> 

Et le moteur de rendu:

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       xmlns:spareparts="de.rotex.spareparts.*" 
       width="220" height="180"> 

    <s:BorderContainer borderColor="#FFF9DE" >  
     <s:Label horizontalCenter="0" verticalCenter="0" 
       text="{data.name}" /> 
    </s:BorderContainer> 
</s:ItemRenderer> 

Si vous essayez maintenant faites défiler, vous remarquerez que (avec un défilement) vous verriez les éléments 6 et 7 en haut (définissant la propriété line-scroll dans windows à 3, ce qui est correct alors). Mais si vous cliquez maintenant sur la barre de défilement et faites défiler de nouveau (en haut), vous verrez que les éléments 12 et 13 sont en haut. Pas les éléments 6 et 7 comme avant ...

Answer 1

Vous pouvez contrôler la quantité défilée par la molette de la souris en sous-classant VScrollBar et en remplaçant la méthode mouseWheelHandler. Un message dans ce fil de discussion a un exemple de code attaché: http://forums.adobe.com/message/2783736