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

Question

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

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 内部的小部件交互时，如何防止 onTapDown 在最外面的 GestureDetector 上被触发？

更新：

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

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.

Answer 1

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

  @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。