在包含火花列表的应用程序上使用鼠标滚轮滚动答案

【问题标题】：Scrolling with the mouse wheel on an application containing a spark List在包含火花列表的应用程序上使用鼠标滚轮滚动
【发布时间】：2011-03-18 18:07:49
【问题描述】：

我有一个显示 spark.List 的应用程序。我的列表中的每一项都必须可见（不能垂直滚动）。

我需要我的应用程序可以在网络浏览器中滚动，所以我添加了一个包含所有组件的 Scroller。当浏览器窗口太小而无法包含我的所有应用程序时，会出现滚动条。

我的应用程序看起来像这样：

<?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" width="100%"  height="100%" >

     <fx:Declarations>
     </fx:Declarations>

    <s:Scroller id="myScroller" width="100%" height="100%">
      <s:VGroup >
        <s:Label text="toto1"/>
        <s:List>
            <s:dataProvider>
                <s:ArrayCollection>
                    <fx:String>item1</fx:String>
                    <fx:String>item2</fx:String>
                    <fx:String>item3</fx:String>
                    <fx:String>item4</fx:String>
                    <fx:String>item5</fx:String>
                </s:ArrayCollection>
            </s:dataProvider>
        </s:List>
        <s:Label text="toto2"/>
    </s:VGroup>
</s:Scroller>
</s:Application>

我的问题是鼠标滚轮事件。

当我用鼠标光标滚动到列表之外时，一切正常。
当我用鼠标光标在列表上滚动时，什么也没有发生。

看起来鼠标滚轮事件被 List 停止了，即使 List 没有滚动条。

有谁知道如何解决这个问题？

【问题讨论】：

标签： apache-flex flex4

【解决方案1】：

我注意到滚动条会捕获鼠标滚轮事件，即使它不可见/不活动。

最好的选择是让 Adobe 在 SDK 中解决此问题
下一个最佳选择是修改滚动类以不捕获鼠标滚轮事件
对“我的列表中的每个项目都必须可见（无垂直滚动）”的列表进行快速而肮脏的修复。就是做一个快速的重新换肤。默认的 ListSkin.mxml 类有点大，要粘贴到这里，所以这是您需要更改的部分（注意：我已经删除了 cmets）：

<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
             <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>

只需将整个班级复制并粘贴到新皮肤中，然后删除（删除）那个 Scoller。如果您现在将此皮肤应用到其定义或 CSS 中的列表中，您应该很高兴。

*您还需要删除我在第 42、45、89、95 行看到的对滚动条的 4 个引用。 List 类不需要滚动条 SkinPart。

【讨论】：

Txs 提示：我删除了我列表中的 Scroller 皮肤部分，它有效！我可以正确滚动我的应用程序。但现在我有另一个问题：我的列表布局不再正确。似乎只有 ScrollerLayout 能够正确显示具有可变高度的行。我将发布另一个问题。谢谢！

【解决方案2】：

我仔细查看了 SDK 代码，我认为这是一个错误。在某处，有一段代码没有检查滚动条是否正在显示并对事件执行“preventDefault()”，阻止它冒泡到父 scoller。

您可能应该在 bugs.adobe.com/flex 上提交错误。

【讨论】：

仅供参考 - 我尝试了上面的示例代码，并且可以在 Flex 4.0 中重现该问题。看起来它已经被修复了，因为这似乎在最新版本的 Flex 4.5 中运行良好。

【解决方案3】：

我在这里找到了一个可接受的解决方法：flexache

英语很糟糕，但我只是在我的滚动条上添加了一个 ID mainScroller 和其中的 vgroup mainVGroup，并在滚动条的鼠标滚轮上添加了一个事件处理程序：

            mainScroller.addEventListener(MouseEvent.MOUSE_WHEEL,
               function scroller1_mouseWheelHandler(event:MouseEvent):void{
                   //calculate the new position 
                   mainVGroup.verticalScrollPosition+=(event.delta*-20);            
                   //stop the event’s bubbling
                   event.stopPropagation();
               }
           ,true);

它并不完美（仍然有点口吃），但它适合我的目的。

【讨论】：