如何检测 GestureDetector 是否悬停在 Flutter 中？

Question

所以我GestureDetector在 Flutter 中有一个小部件，我希望它在“悬停”上做一些事情，就像这样（向任何方向拖动）：

有可能做到GestureDetector吗？任何帮助表示赞赏。

Answer 1

鼠标区域

MouseRegion 小部件 MouseRegion 公开了一些与您的鼠标相关的事件，您猜对了。这些事件是：

OnEnter, which will trigger when your mouse enters the Widget.
OnExit, which will trigger when your mouse leaves the Widget.
OnHover, which will trigger both when your mouse enters the Widget and on every subsequent move inside the Widget.

所有这些实际上都是 PointerEvents，它返回有关用户指针的各种信息。在这里，我们将查看用户鼠标在包含 Widget 内的当前位置，该 Widget 以 Offset 为幌子存储。

 class _MyHoverableWidgetState extends State<MyHoverableWidget>{
        // Our state
        bool amIHovering = false;
        Offset exitFrom = Offset(0,0);
    
        return MouseRegion(
            onEnter: (PointerDetails details) => setState(() => amIHovering = true),
            onExit: (PointerDetails details) => setState(() { 
                amIHovering = false;
                exitFrom = details.localPosition; // You can use details.position if you are interested in the global position of your pointer.
            }),
            child: Container(
                width: 200,
                height: 200,
                child: Center(
                    child:Text(amIHovering ? "Look mom, I'm hovering" : "I exited from: $exitFrom"),
                ), 
            ),
        );

    }

Answer 2

对于任何希望在移动设备上执行此操作的人，请注意，与桌面浏览器不同，触摸界面实际上并不处理“悬停”的概念，因此提出的解决方案MouseRegion.onHover|Enter|Exit，Inkwell.onHover或Listener.onPointerHover在例如 DartPad 中看起来不错的解决方案将不会响应或以其他方式表现在您的设备/模拟器中很奇怪（即会在移动设备上点击时触发，如果您没有仔细阅读该属性，这可能会令人困惑）。MouseRegion.onHover

涉及使用Listener.onPointerMove和手动RenderBox对选择区域进行命中测试的移动解决方案已经在这里和这里多次讨论。（后者还有一个答案，可以使用Rect代表全局坐标系中的边界框的 s 自己明确计算出您想要击中的任何内容。大概Path.contains可以用于对非矩形击中区域执行相同的操作。）