actionscript 3 - Desplazarse al elemento seleccionado en el componente Flex 4 Spark List

actionscript-3 flex4

Question

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

Answer 1

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

list.scrollToIndex(list.selectedIndex);

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

Answer 2

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

Answer 3

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 4

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 diferentes alturas.

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 5

Esto funcionó para mí. tuvo 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 6

Para Spark:

list.ensureIndexIsVisible(index);

Answer 7

Probablemente desees acceder al scroller de la Lista directamente y hacer algo como:

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

Answer 8

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

yourListID.scroller.viewport.verticalScrollPosition

Answer 9

Recientemente lo logré 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>

Después de esto, mi botón controla la manipulación funcionó al incrementar una variable privada "targetindex", luego llamé a una función checkAnimation, que usó la clase Animate, en combo con un SimpleMotionPath y una comparación entre tutpane.firstIndexInView y el índice objetivo. Esto modificó la "horizontalScrollPosition" del grupo.

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

Answer 10

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 11

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

Answer 12

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

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