滚动到Flex 4 Spark List组件中的选定项目

时间:2009-10-21 16:48:58

标签: actionscript-3 flex flex4

我在s:List组件中使用Actionscript设置了所选元素,它可以工作,但List不会滚动到所选项目 - 需要使用滚动条或鼠标滚动。是否可以自动滚动到所选项目?谢谢!

12 个答案:

答案 0 :(得分:23)

答案 1 :(得分:6)

对于Spark:

list.ensureIndexIsVisible(index);

答案 2 :(得分:4)

此功能将滚动到Flex 4+列表的顶部。它考虑了项目的高度,因此它适用于具有不同高度的不同项目的列表。

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;

        }
    }
}

答案 3 :(得分:4)

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

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

答案 4 :(得分:3)

在flex-3中有一个scrollToIndex方法,因此你可以调用

list.scrollToIndex(list.selectedIndex);

我相信这也适用于flex-4。

答案 5 :(得分:3)

这对我有用。必须使用callLater。

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

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

答案 6 :(得分:2)

您可能希望直接访问List的滚动条并执行以下操作:

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

答案 7 :(得分:2)

我在这里看到了这个基本想法...... 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();
}

答案 8 :(得分:1)

您可以将元素的高度乘以其索引,并将此值传递给:

yourListID.scroller.viewport.verticalScrollPosition

答案 9 :(得分:1)

这是一个错误 - 您可以在https://issues.apache.org/jira/browse/FLEX-33660

看到演示和解决方法

答案 10 :(得分:1)

此自定义列表组件扩展适用于我:

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

答案 11 :(得分:0)

我最近在我的一个项目中通过为组中的项目定义了大小来完成此任务。

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

通过递增私有“targetindex”变量,我的按钮控制操作工作,然后我调用了一个checkAnimation函数,它使用Animate类,与SimpleMotionPath组合,并在tutpane.firstIndexInView和目标索引之间进行比较。这修改了组的“horizo​​ntalScrollPosition”。

这允许单独的控件基本上充当滚动条,但我需要滑动控件以查看所选项目。我相信这种技术也适用于自动选择项目

相关问题