複数のスクロールリストをスクロールして同期させる

Question

縦のグループ内にアイテム幅が異なる複数の横スクロールリストがあります。アイテムをクリックすると、他のリストから選択したアイテムがすべてクリアされます。いずれかのリストがスクロールされると、他のすべてのリストは同じ方向に正確に同じ量だけスクロールする必要があります（http://www.foxsports.com.au/tvguideと同様）。

同期されたスクロールで未定義のエラーが発生し、adl（モバイルアプリ）がクラッシュしました。これは、イベントリスナーを介して3つ以上の同期スクロールリストを追加する場合にのみ発生します。

私の質問は、誰もが、このタイプの水平スクロールマルチリスト、おそらく非常に広いデータグリッドまたはスクロールバー内のボタンのグループを達成するために、このエラーがある理由、

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="view1_creationCompleteHandler(event)"> 

<fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 
     import mx.events.PropertyChangeEvent; 

     // listen for scroll event 
     protected function view1_creationCompleteHandler(event:FlexEvent):void 
     { 
      list1.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler1);    
      list2.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler2);    
      list3.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler3);    
     } 

     // scroll all lists together 
     private function propertyChangeHandler1(evt:PropertyChangeEvent):void 
     { 
      var n:Number = Number(evt.newValue); 
      list2.dataGroup.horizontalScrollPosition = n; 
      list3.dataGroup.horizontalScrollPosition = n; 
     } 
     private function propertyChangeHandler2(evt:PropertyChangeEvent):void 
     { 
      var n:Number = Number(evt.newValue); 
      list1.dataGroup.horizontalScrollPosition = n; 
      list3.dataGroup.horizontalScrollPosition = n; 
     } 
     private function propertyChangeHandler3(evt:PropertyChangeEvent):void 
     { 
      var n:Number = Number(evt.newValue); 
      list2.dataGroup.horizontalScrollPosition = n; 
      list1.dataGroup.horizontalScrollPosition = n; 
     } 



     // on click clear currently selected 
     protected function listClickHandler(_iList:int, _index:int):void 
     { 
      switch(_iList) 
      { 
       case 1: 
       { 
        list2.selectedIndex = -1; 
        list3.selectedIndex = -1; 
        break; 
       } 
       case 2: 
       { 
        list1.selectedIndex = -1; 
        list3.selectedIndex = -1; 
        break; 
       } 
       case 3: 
       { 
        list2.selectedIndex = -1; 
        list1.selectedIndex = -1; 
        break; 
       } 
      } 
     } 



    ]]> 
</fx:Script> 

<fx:Declarations> 
    <s:ArrayCollection id="myArrayCollection"> 
     <fx:Object label="FIRST" message="54.99"/> 
     <fx:Object label="Stapler" message="3.59"/> 
     <fx:Object label="Printer" message="129.99"/> 
     <fx:Object label="Notepad" message="2.49"/> 
     <fx:Object label="Mouse" message="21.79"/> 
     <fx:Object label="Keyboard" message="32.99"/> 
     <fx:Object label="Ink" message="54.99"/> 
     <fx:Object label="Stapler" message="3.59"/> 
     <fx:Object label="Printer" message="129.99"/> 
     <fx:Object label="Notepad" message="2.49"/> 
     <fx:Object label="Mouse" message="21.79"/> 
     <fx:Object label="Keyboard" message="32.99"/> 
     <fx:Object label="Ink" message="54.99"/> 
     <fx:Object label="Stapler" message="3.59"/> 
     <fx:Object label="Printer" message="129.99"/> 
     <fx:Object label="Notepad" message="2.49"/> 
     <fx:Object label="Mouse" message="21.79"/> 
     <fx:Object label="Keyboard" message="32.99"/> 
     <fx:Object label="Ink" message="54.99"/> 
     <fx:Object label="Stapler" message="3.59"/> 
     <fx:Object label="LAST" message="32.99"/> 
    </s:ArrayCollection> 
</fx:Declarations> 

<s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0" width="180%" height="100%" > 

    <s:List id="list1" width="100%" click="listClickHandler(1, list1.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}"> 
     <s:layout> 
      <s:HorizontalLayout gap="0" /> 
     </s:layout> 
    </s:List> 
    <s:List id="list2" width="100%" click="listClickHandler(2, list2.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}"> 
     <s:layout> 
      <s:HorizontalLayout gap="0" /> 
     </s:layout> 
    </s:List> 
    <s:List id="list3" width="100%" click="listClickHandler(3, list3.selectedIndex)" horizontalScrollPolicy="on" verticalScrollPolicy="off" selectedIndex="0" dataProvider="{myArrayCollection}"> 
     <s:layout> 
      <s:HorizontalLayout gap="0" /> 
     </s:layout> 
    </s:List> 

</s:VGroup> 

</s:View> 

Answer 1

4.6 sdkのコンピュータでサンプルをテストしましたが、エラーは表示されません。 あなたのコードは異なるサイズのリストでは機能しません（この場合、リストは最小のリストサイズでのみスクロールされます）。

はまた、代わりにビューポートにPropertyChangeEventを使用してのスクロールバーの上にEvent.CHANGEを使用してみてください：

protected function view1_creationCompleteHandler(event:FlexEvent):void 
    { 
     list1.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler1); 
     list2.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler2); 
     list3.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, propertyChangeHandler3); 
    } 

    // scroll all lists together 
    private function propertyChangeHandler1(evt:Event):void 
    { 
     var source = evt.currentTarget as Scroller; 
     var n:Number = list1.scroller.viewport.horizontalScrollPosition; 
     list2.dataGroup.horizontalScrollPosition = n; 
     list3.dataGroup.horizontalScrollPosition = n; 
    } 
    private function propertyChangeHandler2(evt:Event):void 
    { 
     var n:Number = list2.scroller.viewport.horizontalScrollPosition; 
     list1.dataGroup.horizontalScrollPosition = n; 
     list3.dataGroup.horizontalScrollPosition = n; 
    } 
    private function propertyChangeHandler3(evt:Event):void 
    { 
     var n:Number = list3.scroller.viewport.horizontalScrollPosition; 
     list2.dataGroup.horizontalScrollPosition = n; 
     list1.dataGroup.horizontalScrollPosition = n; 
    } 

そして、あなたはスクロールを変更する必要がある場合、プログラムでも、ここで

Answer 2

をFlexEvent.VALUE_COMMIT使用するように簡単な方法であります明らかに、リストはそれがスクロールするための段階よりも広い必要があります。

<s:Scroller id="sc" horizontalScrollPolicy="on" verticalScrollPolicy="off" width="100%"> 
    <s:VGroup id="lists" gap="0" left="0" right="0" top="0" bottom="0"> 
     <s:List id="list1" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}"> 
      <s:layout> 
       <s:HorizontalLayout gap="0" /> 
      </s:layout> 
     </s:List> 

     <s:List id="list2" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}"> 
      <s:layout> 
       <s:HorizontalLayout gap="0" /> 
      </s:layout> 
     </s:List> 

     <s:List id="list3" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="{data}"> 
      <s:layout> 
       <s:HorizontalLayout gap="0" /> 
      </s:layout> 
     </s:List> 
    </s:VGroup> 
</s:Scroller> 

Answer 3

次の2つscrollviewersの内側とScrollViewerののviewChangedイベント分離コードでコードを書くには、あなたの2つのリストボックスを置くことができ いけない、ロングコードのために行きます。

 private void ScrollViewer1_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 
    { 
     ScrollViewer2.ScrollToHorizontalOffset(double.Parse(ScrollViewer1.HorizontalOffset.ToString())); 
    }