Desplácese hasta el elemento seleccionado en el componente Flex 4 Spark List

Question

Estoy configurando el elemento seleccionado en s: Componente de la lista con Actionscript, funciona, pero la Lista no se desplaza al elemento seleccionado; debe desplazarse con la barra de desplazamiento o el mouse. ¿Es posible desplazarse automáticamente al elemento seleccionado? Gracias!

Answer 1

Pruebe el método s: List asegurarIndexIsVisible (index: int): void .

Answer 2

Para Spark:

list.ensureIndexIsVisible(index);

Answer 3

Esta función se desplazará a la parte superior de la lista en Flex 4+. Tiene en cuenta la altura del elemento, por lo que funcionará para listas con diferentes elementos con diferente altura.

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;

        }
    }
}

Answer 4

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

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

Answer 5

En flex-3 hay un método scrollToIndex y, por lo tanto, puedes llamar

list.scrollToIndex(list.selectedIndex);

Creo que esto también debería funcionar en flex-4.

Answer 6

Esto funcionó para mí. Tuve que usar el CallLater.

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

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

Answer 7

Vi esta idea básica aquí ... 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();
}

Answer 8

Probablemente querrás acceder al control de la Lista directamente y hacer algo como:

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

Answer 9

Puede multiplicar la altura de un elemento por su índice y pasar este valor a:

yourListID.scroller.viewport.verticalScrollPosition

Answer 10

Es un error: puede ver la demostración y una solución en https: / /issues.apache.org/jira/browse/FLEX-33660

Answer 11

Esta extensión de componente de lista personalizada funcionó para mí:

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

Answer 12

Recientemente logré esto en uno de mis proyectos al tener un tamaño definido para mis artículos en el grupo ...

<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>

Siguiendo esto, mi botón controla la manipulación, incrementando un " targetindex " privado variable, luego llamé a la función checkAnimation, que usaba la clase Animate, en combo con SimpleMotionPath y una comparación entre tutpane.firstIndexInView y el índice de destino. Esto modificó la " horizontalScrollPosition " del grupo.

Esto permitió que los controles separados actuaran esencialmente como una barra de desplazamiento, pero tenía el requisito de deslizar el control para ver el elemento seleccionado. Creo que esta técnica podría funcionar también para la selección automática de elementos