Faites défiler jusqu'à l'élément sélectionné dans le composant Flex 4 Spark List

StackOverflow https://stackoverflow.com/questions/1602103

Question

Je configure l'élément sélectionné dans le composant s: List avec Actionscript, cela fonctionne, mais la liste ne fait pas défiler jusqu'à l'élément sélectionné - vous devez faire défiler à l'aide de la barre de défilement ou de la souris. Est-il possible de faire défiler automatiquement l'élément sélectionné? Merci!

Était-ce utile?

La solution

Essayez la méthode s: List EnsureIndexIsVisible (index: int): void .

Autres conseils

Pour Spark:

list.ensureIndexIsVisible (index);

Cette fonction fait défiler la liste vers le haut de Flex 4+. Il prend en compte la hauteur de l'élément. Il fonctionnera donc pour les listes contenant différents éléments de hauteur différente. 

private function scrollToIndex(list:List,index:int):void
{
    if (!list.layout)
        return;

    var dataGroup:DataGroup = list.dataGroup;

    var spDelta:Point = dataGroup.layout.getScrollPositionDeltaToElement(index);

    if (spDelta)
    {
        dataGroup.horizontalScrollPosition += spDelta.x;
        //move it to the top if the list has enough items
        if(spDelta.y > 0)
        {
            var maxVSP:Number = dataGroup.contentHeight - dataGroup.height;
            var itemBounds:Rectangle = list.layout.getElementBounds(index);
            var newHeight:Number = dataGroup.verticalScrollPosition + spDelta.y 
            + dataGroup.height - itemBounds.height;
            dataGroup.verticalScrollPosition = Math.min(maxVSP, newHeight);
        }
        else
        {
            dataGroup.verticalScrollPosition += spDelta.y;

        }
    }
}

//try this
this.callLater(updateIndex);//where you want to set the selectedIndex

private function updateIndex():void
{
    list.selectedIndex = newIndex;
    list.ensureIndexIsVisible(newIndex);
}

En Flex-3, il existe une méthode scrollToIndex et vous pouvez donc appeler

. 
list.scrollToIndex(list.selectedIndex);

Je pense que cela devrait également fonctionner en flex-4.

Cela a fonctionné pour moi. dû utiliser le callLater. 

list.selectedItem = "MyTestItem"; //or list.selectedIndex = 10;
this.callLater(updateIndex); //dispatch an update to list

private function updateIndex():void {
    list.ensureIndexIsVisible(list.selectedIndex);
}

J'ai vu cette idée de base ici ... http://arthurnn.com/blog/2011/ 01/12 / coverflow-layout-for-flex-4 / 

public function scrollGroup( n : int ) : void
{
    var scrollPoint : Point = theList.layout.getScrollPositionDeltaToElement( n );
    var duration : Number = ( Math.max( scrollPoint.x, theList.layout.target.horizontalScrollPosition ) - Math.min( scrollPoint.x, theList.layout.target.horizontalScrollPosition )) * .01;
    Tweener.addTween(theList.layout,{ horizontalScrollPosition: scrollPoint.x , time:duration});
}
protected function theList_caretChangeHandler(event:IndexChangeEvent):void
{
    scrollGroup( event.newIndex );
    event.target.invalidateDisplayList();
}

Vous voudrez probablement accéder directement à la liste de défilement de la liste et faire quelque chose comme:

list.scroller.scrollRect.y = list.itemRenderer.height * index;

Vous pouvez multiplier la hauteur d'un élément par son index et transmettre cette valeur à: 

yourListID.scroller.viewport.verticalScrollPosition

C’est un bogue. Vous pouvez voir la démonstration et une solution de contournement à la https: / /issues.apache.org/jira/browse/FLEX-33660

Cette extension de composant de liste personnalisée a fonctionné pour moi: 

<s:List
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    valueCommit="callLater(ensureIndexIsVisible, [selectedIndex])">
</s:List>

J'ai récemment réalisé cela dans l'un de mes projets en définissant une taille pour mes éléments dans le groupe. 

<s:Scroller x="940" y="0" maxHeight="465" maxWidth="940" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  <s:HGroup  id="tutPane" columnWidth="940" variableColumnWidth="false" gap="0" x="0" y="0">
  </s:HGroup>
</s:Scroller>

Ensuite, les contrôles de mon bouton pour les manipulations ont fonctionné en incrémentant un fichier privé "quotindex". puis j’ai appelé une fonction checkAnimation, qui utilisait la classe Animate, en combinaison avec SimpleMotionPath et une comparaison entre tutpane.firstIndexInView et l’index cible. Ceci a modifié le " horizontalScrollPosition " du groupe.

Cela permettait à des contrôles distincts d’agir essentiellement comme une barre de défilement, mais j’avais l’obligation de faire glisser le contrôle pour afficher l’élément sélectionné. Je pense que cette technique pourrait également fonctionner pour la sélection automatique d’éléments

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top