Плавная прокрутка списка искр с элементами переменной высоты с помощью колесика мыши

Question

У нас есть список элементов переменной высоты, которые мы отображаем в элементе управления 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>

По-видимому, не существует готового метода для реализации плавной прокрутки в списке искр. Как можно было бы реализовать плавную прокрутку в списке искр для элементов переменной высоты?

Answer 1

Как @Sunil_D. Предполагается, что прослушивание события mousewheel и ручная настройка HorizontalScrollPosition - это простой способ справиться с этим. Добавьте EventListener для вашего компонента

chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);

и увеличивать / уменьшать горизонтальное положение ScrollPosition, например, с кратным значением event.delta

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

Поиск подходящего SOME_CORRECT_VALUE может потребовать некоторых экспериментов, но это не должно быть трудно найти.

Answer 2

Редактировать:

Вот еще один способ сделать это: http://forums.adobe.com/message/3844410

Хорошо, так что это будет нелегко, но это выполнимо.

1) Создайте свой скин для вашего списка

2) В пользовательском скине замените скроллер на собственный скроллер (MyScroller)

3) Создайте новый класс, расширяющий Scroller, под названием MyScroller

4) Adobe в своей бесконечной мудрости сделала skin_mouseWheelHandler приватным - что они, кажется, делают повсеместно, поэтому вам придется переопределить что-то более высокое, например, attachSkin и detachSkin. Или вы можете попробовать добавить свой собственный skin_mouseWheelHandler с более высоким приоритетом в attachSkin и запретить использование по умолчанию, чтобы не вызывать значение по умолчанию.

5) Скопируйте код в skin_mouseWheelHandler и измените его в соответствии с вашими требованиями.