Flutter web GestureDetector：检测鼠标滚轮事件

Posted 2023-02-23

【中文标题】Flutter web GestureDetector：检测鼠标滚轮事件

【英文标题】：Flutter web GestureDetector: detect mouse wheel events

【发布时间】：2021-03-07 04:21:06

【问题描述】：

我正在为 web 开发一个颤振应用程序，当我在一个小部件（不是滚动小部件）内滚动鼠标滚轮时，我试图执行一个回调方法。

我知道MouseRegion 小部件，并且使用Listener 作为它的孩子我可以检测到onPointerSignal 事件。当Listener 的孩子是一个可滚动的小部件时，这很好用，例如ListView，但如果这个小部件不可滚动，它就不起作用。

理想情况下，我希望拥有一个类似于GestureDetector 的小部件，其回调方法类似于onPanStart、onPanUpdate 和onPanEnd，但发生在鼠标滚轮事件上（或者，在同样的方式，用于笔记本电脑上的触控板滚动事件）。

有人知道我怎样才能做到这一点吗？

【参考方案1】：

Listener 不需要任何父级。 可以使用如下所示的小部件，它将其子组件包装在 Listener 中，并在收到 PointerScrollEvent 时调用给定的回调：

class ScrollDetector extends StatelessWidget 
  final void Function(PointerScrollEvent event) onPointerScroll;
  final Widget child;

  const ScrollDetector(
    Key key,
    @required this.onPointerScroll,
    @required this.child,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Listener(
      onPointerSignal: (pointerSignal) 
        if (pointerSignal is PointerScrollEvent) onPointerScroll(pointerSignal);
      ,
      child: child,
    );
  

Here's a complete example on DartPad.

【讨论】：

您的代码运行良好。但是，在您提供的 DartPad 示例中，如果我省略了 color: Colors.green 行，它将停止工作。为什么它只有在提供颜色时才有效？

@DaniS。来自docs：默认情况下，容器对所有命中测试返回 false。如果指定了颜色属性，则命中测试由 ColoredBox 处理，它始终返回 true。如果指定了 decoration 或foregroundDecoration 属性，命中测试由Decoration.hitTest 处理。

看起来这只适用于监听触摸输入的小部件。

我想到了一种解决方法，通过在用户滚动时在视图上显示 PointerInterceptor 来避免滚动到 htmlView，但是，首先，当光标位于 HTMLView 上时，侦听器不起作用这违背了我的目的，其次，它不会通知事件何时停止/结束，即使用户滚动了任何其他组件，PointerInterceptor 也不会隐藏，这会使 HtmlView 无法使用。遗憾的是，所见即所得的编辑器都不能在 Flutter web 中正常工作。