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

Question

我正在开发一个适用于 Web 的 Flutter 应用程序，并尝试在小部件内滚动鼠标滚轮时执行回调方法（该小部件不是可滚动小部件）。

我知道 MouseRegion 小部件，并且使用它作为 Listener 子级，我可以检测到 onPointerSignal 事件。当 Listener 的子部件是可滚动的小部件，例如 ListView 时，这很好用，但如果该部件不可滚动，则无法正常工作。

我理想情况下想要的是类似于 GestureDetector 的小部件，具有类似于 onPanStart、onPanUpdate 和 onPanEnd 的回调方法，但是发生在鼠标滚轮事件上（或者同样地，在笔记本电脑上的触摸板滚动事件上）。

有人知道我如何实现这一点吗？

- Dani S.

Answer 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,
    );
  }
}

在DartPad上，这里有一个完整的例子。

- hacker1024

---

你的代码完美运行。然而，在你提供的DartPad示例中，如果我省略color: Colors.green这一行，它就无法工作。为什么只有提供颜色时它才能工作？ - Dani S.

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

看起来这只能在监听触摸输入的小部件上工作。 - hacker1024

我想到了一个解决HTMLView无法滚动的方法，即在用户滚动时在视图上显示PointerInterceptor，但是首先，当光标位于HTMLView上时，监听器不起作用，这对我来说是有问题的；其次，它不会通知事件何时停止/结束，即使用户已经在其他组件上滚动，PointerInterceptor也不会隐藏，这使得HtmlView无法使用。很遗憾，在Flutter Web中没有一个所见即所得的编辑器能正常工作。 - Lalit Fauzdar