Flex 4 Spark List コンポーネントで選択した項目までスクロールします
-
05-07-2019 - |
質問
Actionscriptを使用してs:Listコンポーネントに選択された要素を設定しています。それは機能しますが、リストは選択された項目までスクロールしません。スクロールバーまたはマウスでスクロールする必要があります。選択した項目まで自動スクロールすることはできますか?ありがとう !
解決
s:List
メソッドを試してください ensureIndexIsVisible(index:int):void 。
他のヒント
Sparkの場合:
list.ensureIndexIsVisible(index);
この関数は、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;
}
}
}
//try this
this.callLater(updateIndex);//where you want to set the selectedIndex
private function updateIndex():void
{
list.selectedIndex = newIndex;
list.ensureIndexIsVisible(newIndex);
}
flex-3には scrollToIndex
メソッドがあるため、呼び出すことができます
list.scrollToIndex(list.selectedIndex);
これはflex-4でも機能するはずだと思います。
これは私のために働いた。 callLaterを使用する必要がありました。
list.selectedItem = "MyTestItem"; //or list.selectedIndex = 10;
this.callLater(updateIndex); //dispatch an update to list
private function updateIndex():void {
list.ensureIndexIsVisible(list.selectedIndex);
}
ここでこの基本的なアイデアを見ました... 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();
}
おそらく、リストのスクローラーに直接アクセスし、次のようなことをしたいと思うでしょう:
list.scroller.scrollRect.y = list.itemRenderer.height * index;
要素の高さをそのインデックスで乗算し、この値を以下に渡すことができます。
yourListID.scroller.viewport.verticalScrollPosition
このカスタムリストコンポーネント拡張機能は私のために機能しました:
<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 つで、グループ内のアイテムのサイズを定義することでこれを達成しました。
<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 とターゲット インデックスを比較しました。これにより、グループの「horizontalScrollPosition」が変更されました。
これにより、個別のコントロールが基本的にスクロール バーとして機能できるようになりましたが、選択した項目を表示するにはコントロールをスライドする必要がありました。このテクニックはアイテムの自動選択にも応用できると思います