Question

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

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

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

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

不要去长码，您可以将两个列表框放在两个scrollviewer中，并在scrollviewer视图中将Changed事件写入代码隐藏中。

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

Answer 3

在具有4.6 sdk的计算机上测试了您的示例，但我没有看到任何错误。仍然你的代码不适用于不同大小的列表（在这种情况下，你的列表只会滚动到最小的列表大小）。

另外，不要在视口上使用PropertyChangeEvent，而是尝试在scrollBar上使用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

通过滚动同步来灵活多个火花列表

3 个答案: