Flex 多个火花列表，滚动同步

Question

我有几个水平滚动列表，其中不同的项目宽度堆叠在一个垂直组内。在一个项目上单击其他列表中的所有任何选定项目都将被清除。当滚动任何列表时，所有其他列表应在同一方向滚动完全相同的量，类似于http://www.foxsports.com.au/tvguide。

同步滚动引发了一个未定义的错误，并且有一次使 adl（它是一个移动应用程序）崩溃。仅当我通过事件侦听器添加超过 2 个同步滚动列表时才会发生这种情况。

所以我的问题是：任何人都知道为什么会出现这种错误，或者是否有更好的方法来实现这种类型的水平滚动多列表，可能是一个非常宽的数据网格或滚动器内的一组按钮？

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

这是一个简单的方法，显然列表需要比舞台更宽才能滚动。

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

不要使用长代码， 您可以将两个列表框放在两个滚动查看器中，并在滚动查看器的 viewChanged 事件中在代码隐藏中编写您的代码。

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

Answer 3

在具有 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;
    }

如果您需要以编程方式更改滚动，也可以使用 FlexEvent.VALUE_COMMIT