如何防止在父小部件 GestureDetector 上触发 onTapDown？

Question

我有一个堆栈，可以在其中拖动多个小部件。此外，Stack 所在的容器有一个 GestureDetector 可以在 onTapDown 和 onTapUp 上触发。我希望仅当用户在 Stack 中的小部件外部点击时才触发这些 onTap 事件。我试过以下代码：

class Gestures extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _GesturesState();
}

class _GesturesState extends State<Gestures> {
  Color background;
  Offset pos;

  @override
  void initState() {
    super.initState();
    pos = Offset(10.0, 10.0);
  }

  @override
  Widget build(BuildContext context) => GestureDetector(
    onTapDown: (_) => setState(() => background = Colors.green),
    onTapUp: (_) => setState(() => background = Colors.grey),
    onTapCancel: () => setState(() => background = Colors.grey),
        child: Container(
          color: background,
          child: Stack(
            children: <Widget>[
              Positioned(
                top: pos.dy,
                left: pos.dx,
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onPanUpdate: _onPanUpdate,
//                  onTapDown: (_) {},  Doesn't affect the problem
                  child: Container(
                    width: 30.0,
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
              )
            ],
          ),
        ),
      );

  void _onPanUpdate(DragUpdateDetails details) {
    RenderBox renderBox = context.findRenderObject();
    setState(() {
      pos = renderBox.globalToLocal(details.globalPosition);
    });
  }
}

但是，当开始拖动小部件时，最外层容器的onTap也会被触发，此时背景会暂时变绿。设置 HitTestBehavior.opaque 似乎没有像我预期的那样工作。也没有将 onTapDown 的处理程序添加到 Stack 中的小部件。

那么，当用户与 Stack 内部的小部件交互时，如何防止在最外层的 GestureDetector 上触发 onTapDown？

更新：

我遇到的问题的一个更简单的例子：

GestureDetector(
  onTapDown: (_) {
    print("Green");
  },
  child: Container(
    color: Colors.green,
    width: 300.0,
    height: 300.0,
    child: Center(
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTapDown: (_) {
          print("Red");
        },
        child: Container(
          color: Colors.red,
          width: 50.0,
          height: 50.0,
        ),
      ),
    ),
  ),
);

当我点击并按住红色容器时，即使内部 GestureDetector 具有 HitTestBehavior.opaque.

，也会打印 "Red" 和 "Green"

Answer 1

在这个答案中，我将解决您提供的更简单的示例。您正在创建以下 Widget 层次结构：

 - GestureDetector       // green
   - Container
     - Center
       - GestureDetector // red
          - Container

因此红色GestureDetector is a child Widget of the green GestureDetector. The green GestureDetector has the default HitTestBehavior:HitTestBehavior.deferToChild。这就是为两个容器触发 onTapDown 的原因。

Targets that defer to their children receive events within their bounds only if one of their children is hit by the hit test.

相反，您可以使用 Stack 来构建您的 UI:

 - Stack
   - GestureDetector // green
     - Container
   - GestureDetector // red
     - Container

此结构将产生以下源代码。它看起来一样，但行为是您想要的：

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    GestureDetector(
      onTapDown: (_) {
        print("Green");
      },
      child: Container(
        color: Colors.green,
        width: 300.0,
        height: 300.0,
      ),
    ),
    GestureDetector(
      onTapDown: (_) {
        print("Red");
      },
      child: Container(
        color: Colors.red,
        width: 50.0,
        height: 50.0,
      ),
    )
  ],
)

Answer 2

我发现我可以通过创建具有如下命中测试行为的呈现对象来获得我想要的行为（使小部件对其父对象透明，同时仍然响应指针事件）：

  @override
  bool hitTest(BoxHitTestResult result, {@required Offset position}) {
    // forward hits to our child:
    final hit = super.hitTest(result, position: position);
    // but report to our parent that we are not hit when `transparent` is true:
    return false;
  }

我在此处发布了一个包含具有此行为的小部件的程序包：https://pub.dev/packages/transparent_pointer。

如何防止在父小部件 GestureDetector 上触发 onTapDown？

How do I prevent onTapDown from being triggered on a parent widgets GestureDetector?

gesture-recognition

flutter