Question

We are building a page with 2 containers, one is a big container covering the whole screen and the other a small one inside the big one. When the users touch inside the small container and move their finger it should pan the small container. When they swipe out of the small container it should move the big container (like a card in Tinder).

The issue is, the big container is always getting the swipe event before the small container is getting the pan event.

Is there a way to consume gesture event so that they are not sent to other component?

I saw the doc about GestureArena but I didn't find any example on how it works. Is there a way to force a component to always win the arena (or to always lose it)?

Edit: rephrased for clarity.

Answer 1

非常直接的解决方案：

对于顶级 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就会被停用。

Answer 2

问题如下： onHorizontalDrag和onVerticalDrag手势将始终位于onPan之前，并会阻止onPan被调用（即使GestureDetector听onHorizontalDrag事件是在监听onPan事件的人后面。在小容器上添加任何监听器onHorizontalDrag（即使只是onHorizontalDragCancel）都会使小容器获取并使用该事件（这意味着大容器不会接收它）。

要解决我的问题，我将onPanUpdate和onHorizontalDragUpdate替换为onVerticalDragUpdate听众（onPanStart和onPanEnd也是如此）。它不如使用onPan那么好，因为你只得到垂直或水平事件的DragUpdateDetails（我必须添加一些逻辑来补偿这一点），但它会阻止潜在的GestureDetector来自劫持onPan事件。

Have 2 gesture detectors with same gesture on the same page in flutter

2 个答案: