使用鼠标滚轮平滑滚动具有可变高度项的 Spark 列表答案

【问题标题】：Smooth scrolling a Spark List with variable height items using the mouse wheel使用鼠标滚轮平滑滚动具有可变高度项的 Spark 列表
【发布时间】：2013-08-23 15:03:37
【问题描述】：

我们有一个在 Spark List 控件中显示的可变高度项的列表。当用户单击并拖动垂直滚动条时，列表会平滑滚动。当使用向上/向下箭头时，它会以小而离散的步骤移动。当使用鼠标滚轮时，列表以非常大的离散步长滚动，这对用户来说是个问题。

我们希望启用鼠标滚轮的平滑滚动。我们项目的高度差异很大，由于离散滚动，当您使用鼠标滚动时很容易迷路。

我们的实现相当简单：

<s:List id="chartList" 
        dataProvider="{pm.charts}"
        itemRenderer="charts.ChartItemRenderer"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="on"
        useVirtualLayout="false"
        cachePolicy="auto">
</s:List>

<?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" 
                autoDrawBackground="false" 
                xmlns:charts="charts.*"
                >
    <fx:Script>
        <![CDATA[
            private var _canvas:BitmapData;

            public function set canvas(value:BitmapData):void
            {
                _canvas = value;
            }

            [Bindable]
            public function get canvas():BitmapData
            {
                return _canvas;
            }

            public function render(x:int,y:int, data:int):void
            {
                _canvas.draw(this);
            }
        ]]>
    </fx:Script>
        <charts:DefaultChartContainer 
            chart="{data}" 
            cachePolicy="on"/>
</s:ItemRenderer>

似乎没有现成的方法可以在 Spark 列表中实现平滑滚动。如何在火花列表中为可变高度项目实现平滑滚动？

【问题讨论】：

您是否尝试过监听鼠标滚轮事件，然后手动调整滚动位置？
用 VirtualLayout = false 试试看。

标签： apache-flex smooth-scrolling spark-list

【解决方案1】：

编辑：

这是另一种方法： http://forums.adobe.com/message/3844410#3844410

好的，所以这并不容易，但它是可行的。

1) 为您的列表创建自定义皮肤

2）在自定义皮肤中，将滚动条替换为自定义滚动条（MyScroller）

3) 创建一个扩展 Scroller 的新类，称为 MyScroller

4) Adobe 以其无限的智慧将 skin_mouseWheelHandler 设为私有 - 他们似乎在所有地方都这样做，所以你必须覆盖更高的东西，可能是 attachSkin 和 detachSkin。或者您可以尝试在 attachSkin 中添加您自己的具有更高优先级的 skin_mouseWheelHandler 并阻止其默认设置，以便不会调用默认设置。

5) 复制 skin_mouseWheelHandler 中的代码，并根据需要进行修改。

【讨论】：

【解决方案2】：

喜欢@Sunil_D。建议，监听鼠标滚轮事件并手动调整 HorizontalScrollPosition 是处理此问题的简单方法。为您的组件添加 EventListener

chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);

并使用例如 event.delta 的倍数来增加/减少水平滚动位置

protected function chartList_mouseWheelHandler(event:MouseEvent):void
{           
    chartList.verticalScrollPosition -= (event.delta * SOME_CORRECT_VALUE);
}

找到合适的 SOME_CORRECT_VALUE 可能需要一些试验，但应该不难找到。

【讨论】：