如何在 Flutter 中检测 2 个堆叠小部件上的光标悬停位置

Question

目前，我正在尝试开发一个项目，该项目要求我将光标悬停行为从顶部堆叠的小部件传递到其下部的小部件。同时还执行该小部件本身所需的操作。这是我目前的尝试：

        Stack(
          children: [
            Center(
              child: MouseRegion(
                onHover: (event) {
                  debugPrint('Red: ${event.position}');
                },
                child: Container(
                  height: 300,
                  width: 300,
                  color: Colors.red,
                ),
              ),
            ),
            Center(
              child: MouseRegion(
                hitTestBehavior: HitTestBehavior.translucent,
                onHover: (event) {
                  debugPrint('Green: ${event.position}');
                },
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.green,
                ),
              ),
            ),
          ],
        )

在这里，将鼠标悬停在绿色容器上时，不会调用红色容器的

debugPrint

语句。

Answer 1

悬停仅适用于顶部小部件，即使您在上面各堆叠 10 个小部件，第一个或顶部小部件也只能获得悬停效果。

例如：- 如果你在上面各堆放 10 张纸，然后你想触摸上面的最后一张纸，你永远无法触摸它，这就是堆栈的工作原理。

因此上面的小部件可以获得悬停效果，而对于较低的小部件，您必须将它们放在一边才能获得悬停功能。这就是解决方案。