web-dev-qa-db-ja.com

Flex4で選択したアイテムまでスクロールしますSparkリストコンポーネント

Actionscriptを使用してs：Listコンポーネントで選択した要素を設定していますが、機能しますが、リストは選択したアイテムまでスクロールしません。スクロールバーまたはマウスでスクロールする必要があります。選択したアイテムに自動スクロールすることはできますか？ありがとう！

actionscript-3apache-flexflex4
26
Rodion Bykov

s:Listメソッドを試してください ensureIndexIsVisible（index：int）：void 。

23
an0nym0usc0ward

Sparkの場合：

list.ensureIndexIsVisible(index);

6
Yozef

この関数は、Flex4以降でリストの一番上にスクロールします。アイテムの高さを考慮に入れるため、高さが異なるさまざまなアイテムのリストで機能します。

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;

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

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

Flex-3にはscrollToIndexメソッドがあるため、呼び出すことができます

list.scrollToIndex(list.selectedIndex);

これはflex-4でも機能するはずです。

3
Amarghosh

これは私のために働いた。 callLaterを使用する必要がありました。

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

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

リストのスクローラーに直接アクセスして、次のような操作を行うことをお勧めします。

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

2
shi11i

私はここでこの基本的な考えを見ました... 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();
}
2
Gotta Getmedat

これはバグです-デモと回避策は https://issues.Apache.org/jira/browse/FLEX-3366 で確認できます。

1
Alexander Farber

要素の高さにそのインデックスを掛けて、この値を次の宛先に渡すことができます。

yourListID.scroller.viewport.verticalScrollPosition
1
FT

このカスタムリストコンポーネント拡張機能は私のために働きました：

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

私は最近、私のプロジェクトの1つで、グループ内のアイテムのサイズを定義することでこれを達成しました。

<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」変数をインクリメントすることで機能し、次に、Animateクラスを使用するcheckAnimation関数を、SimpleMotionPathと組み合わせて、tutpane.firstIndexInViewとターゲットインデックスの比較で呼び出しました。これにより、グループの「horizo​​ntalScrollPosition」が変更されました。

これにより、個別のコントロールを基本的にスクロールバーとして機能させることができましたが、選択したアイテムを表示するには、コントロールをスライドさせる必要がありました。この手法は、アイテムの自動選択にも機能すると思います。

0
Method