scrolling interval in a Spark List with Tilelayout oversized while using mouse wheel after scrolling with mouseclick

问题

I have a spark List with an item renderer and a tile layout.
If I scroll by clicking with the mouse on the scroll bar and trying to scroll with the mouse wheel after that, there is a problem:

The interval of the scrolling is oversized, instead of scrolling one item down (or up) the List scrolls 4 items down (or up).

<s:List
    dataProvider="{myDataProvider}"
    itemRenderer="MyRenderer"
    left="11" right="11"
    bottom="3" top="10"
    useVirtualLayout="false"
    >
        <s:layout>
            <s:TileLayout
                columnAlign="justifyUsingWidth"
                rowAlign="justifyUsingGap"
                orientation="rows"
                rowHeight="180"
                columnWidth="220"
                clipAndEnableScrolling="true"
                />
        </s:layout>
    </s:List>

rowHeight = 180 and columnWidth = 220 are the dimension of my renderer.

Any hints what's wrong or how I could solve this problem?

Update: This is a small example:

The main application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="init(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] public var items:ArrayCollection;

            protected function init(event:FlexEvent):void{
                items = new ArrayCollection();
                for(var i:int = 0; i<200; i++){
                    var obj:Object = new Object();
                    obj.name = "Item "+i;
                    items.addItem(obj);
                }
            }

                    protected function list1_mouseWheelHandler(event:MouseEvent):void{
                trace("delta ="+event.delta);
            }
        ]]>
    </fx:Script>
    <s:Group width="50%"
             height="50%">
        <s:List
            dataProvider="{items}"
            left="5" right="5"
            top="5" bottom="5"
            itemRenderer="MyRenderer"
            allowMultipleSelection="false"
            useVirtualLayout="false"
            mouseWheel="list1_mouseWheelHandler(event)"
            >
            <s:layout>
                <s:TileLayout
                    columnAlign="justifyUsingWidth"
                    rowAlign="justifyUsingGap"
                    orientation="rows"
                    rowHeight="180"
                    columnWidth="220"
                    clipAndEnableScrolling="true"
                    />
            </s:layout>
        </s:List>
    </s:Group>

And the renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                xmlns:spareparts="de.rotex.spareparts.*"
                width="220" height="180">

    <s:BorderContainer borderColor="#FFF9DE" >      
        <s:Label horizontalCenter="0" verticalCenter="0"
                 text="{data.name}" />
    </s:BorderContainer>
</s:ItemRenderer>

If you now try to scroll you will notice that (with one scroll) you would see Item 6 and 7 at the top (setting the line-scroll property in windows to 3, which is alright then). But If you now click on the scroll bar and scroll again (from the top) you will see that Item 12 and 13 are at the top. Not Item 6 and 7 as before...

回答1:

You can control the amount scrolled by the mousewheel by subclassing VScrollBar and overriding the mouseWheelHandler method. A post in this forum thread has example code attached: http://forums.adobe.com/message/2783736

来源：https://stackoverflow.com/questions/3584127/scrolling-interval-in-a-spark-list-with-tilelayout-oversized-while-using-mouse-w