有2个手势检测器，在同一页上有相同的姿态

Question

我们正在用两个容器构建一个页面，一个是覆盖整个屏幕的大容器，另一个是大屏幕内的小容器。当使用者触摸到小容器内并移动他们的手指时，它应该将小容器平移。当他们刷出小容器时，它应该移动大容器(就像Tinder中的卡片)。

问题是，大容器总是在小容器得到pan事件之前得到swipe事件。

是否有一种方法可以使用手势事件，使其不被发送到其他组件？

我看到了关于GestureArena的文档，但是我没有找到任何关于它是如何工作的例子。是否有办法强迫组件总是赢得竞技场(或者总是失去它)？

编辑：为清晰起见重新措辞。

Answer 1

问题是：onHorizontalDrag和onVerticalDrag手势总是出现在onPan之前，并且会阻止调用onPan (即使侦听onHorizontalDrag事件的GestureDetector在onPan事件的后面)。将任何侦听器添加到小容器上的onHorizontalDrag (甚至仅仅是onHorizontalDragCancel)将使小容器获取并使用事件(这意味着下面的大容器不会接收它)。

为了解决我的问题，我将onPanUpdate侦听器替换为onHorizontalDragUpdate和onVerticalDragUpdate ( onPanStart和onPanEnd也一样)。它不如使用onPan好，因为您只获得垂直或水平事件的DragUpdateDetails (我不得不添加一些更多的逻辑来弥补这一点)，但它防止底层GestureDetector劫持onPan事件。

Answer 2

非常直接的解决方案：

对于顶级GestureDetector，需要为回调应用一个条件：

// bool in a State
bool _isTopLevel = true;

// ... build code
  GestureDetector(
      onTap: _isTopLevel ? _tapEvent : null,
      child: GestureDetector(
        onTapDown: () => setState(() => _isTopLevel = false),
        onTapUp: () => setState(() => _isTopLevel = true),
        // ...
      ),
  )

一旦较低级别的GestureDetector捕获命中事件，顶级GestureDetector就会被禁用。