Actionscript 3 Flex多个spark列表，滚动同步

我有几个水平滚动列表，在一个垂直组中堆叠了不同的项目宽度。单击某个项目时，其他列表中的所有选定项目都将被清除。当滚动任何列表时，所有其他列表应在同一方向上滚动相同的数量，simalar至

同步滚动正在抛出一个未定义的错误，并且有一次使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>

---

在使用4.6 sdk的计算机上测试了您的示例，但没有发现任何错误。 但是，您的代码无法在不同大小的列表上运行（在这种情况下，您的列表将仅滚动到最小的列表大小）

还可以尝试使用滚动条上的Event.CHANGE，而不是在视口上使用PropertyChangeEvent：

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

这是一种简单的方法，显然列表需要比stage更宽才能滚动

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

---

不要写太长的代码， 您可以将两个列表框放在两个scrollviewer中，并在scrollviewer的viewChanged事件中用codebehind编写代码。

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

---

发布错误可能会有帮助，或者更有用的是错误的堆栈跟踪。谢谢Catalin，实际上我现在已经可以使用它了，而不需要通过编程更新滚动位置，我认为更好。我只是把VGroup放在一个滚动条上，让滚动条水平滚动条打开，垂直滚动条关闭，宽度为100%，然后关闭水平列表上的所有滚动条。哦，不要给你的列表加宽。非常感谢！这帮助我为移动设备创建了一个简单的datagrid组件：）