0

垂直グループ内に積み重ねられたアイテム幅の異なるいくつかの水平スクロール リストがあります。アイテムをクリックすると、他のリストから選択されたすべてのアイテムがクリアされます。リストのいずれかがスクロールされると、他のすべてのリストは、 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>
4

3 に答える 3

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>
于 2012-04-11T03:03:39.020 に答える
1

長いコードを使用しないでください。2 つのリストボックスを 2 つの scrollviewer 内に配置し、scrollviewer の viewChanged イベントで分離コードでコードを記述できます。

        private void ScrollViewer1_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        ScrollViewer2.ScrollToHorizontalOffset(double.Parse(ScrollViewer1.HorizontalOffset.ToString()));
    }
于 2013-11-07T09:59:02.427 に答える
0

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 も使用してください。

于 2012-04-10T06:29:37.837 に答える