约 11 分钟8 张卡

Flutter 手势

Flutter 的指针事件描述按下、移动、抬起等原始输入，手势则把一段输入识别为点击、拖动或缩放。同一次按下可以让多个对象收到指针事件，但不意味着它们都能成功识别同一种手势。

排查“父组件为什么没有点击回调”或“列表为什么滚不动”时，需要分别回答两件事：哪些对象进入了命中路径，哪些识别器赢得了竞争。本文以 Flutter 3.24.3 为基线，讨论触摸输入的主要机制。

1. 面试核心

先记住这几条，再读正文

命中测试确定接收指针事件的路径，手势竞技场解决识别器之间的竞争。两层职责不同，收到按下事件不代表最终获得点击。卡 · 指针事件与命中路径
对一次触摸序列，按下时得到的命中路径会用于后续移动、抬起或取消事件。手指移出原组件，不表示后续事件改送到当前位置下面的新组件。卡 · 按下后保留这次输入的接收路径
GestureDetector 根据非空回调配置手势识别器；Listener 直接观察原始事件，不会因为添加一个监听就获得点击语义。卡 · 指针事件与命中路径
父子 GestureDetector 的点击竞争不能用 opaque 或 translucent 强制改变胜负。behavior 控制命中测试，父子识别器仍可能一起进入竞技场。卡 · 手势竞技场
onTapDown 不是点击已经成功的通知。它可能先发生，随后识别器输掉竞争并收到 onTapCancel；临时按压状态要有取消清理路径。卡 · 按压反馈需要处理取消
拖动方向、识别条件和参与范围决定滚动冲突。列表子项用过于宽泛的拖动识别器，可能与列表争抢同一方向的输入。卡 · 综合题
IgnorePointer 与 AbsorbPointer 都能阻止子树收到指针输入，但对后方对象的命中影响不同；它们不是删除 Widget，也不等同于完整的业务禁用状态。卡 · IgnorePointer 与 AbsorbPointer
自定义手势仍要处理生命周期、取消和可访问性。先使用现有按钮或识别器，只有输入规则确实不同才扩展底层机制。卡 · 自定义识别与排查

2. 指针事件与命中路径

卡 · Listener、GestureDetector 与命中测试分别做什么？卡 · 手指按下后移到另一个组件，后续移动事件会改送到新组件吗？

2.1 按下后保留这次输入的接收路径

命中测试（hit test）根据坐标和渲染对象的命中规则，确定哪些对象应该接收这次输入。它不是遍历所有 Widget 并调用它们的点击函数。

收到 PointerDownEvent 时，框架进行命中测试并保存结果。随后同一 pointer 的移动事件沿已保存的路径分发，抬起或取消时使用并清除这条路径。这样，拖动过程中即使手指离开原组件，它仍可以处理同一次拖动的后续输入。

路径通常包含命中的内层目标及其祖先。对已进入路径的目标，指针分发没有类似 DOM stopPropagation() 的通用“停止向上发送”操作。这个结论只针对指针分发，不表示所有目标都能赢得手势竞争。

鼠标悬停、滚轮信号等输入有自己的处理方式，不能把“按下后复用路径”套到所有 PointerEvent。坐标也要区分屏幕范围的 position 与接收者局部坐标 localPosition，经过变换的区域不能只按屏幕坐标直接计算局部偏移。

2.2 Listener 观察输入，GestureDetector 识别动作

Listener 把原始指针事件交给回调，适合确实需要记录轨迹或处理低层输入的区域。GestureDetector 根据配置的回调创建相应识别器，处理点击、长按、拖动等语义。

下面的组件同时观察父子两层的按下事件，并为两层配置点击识别器：

import 'package:flutter/widgets.dart';

Widget nestedTapProbe(List<String> events) {
  return Center(
    child: Listener(
      onPointerDown: (_) => events.add('parent-down'),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => events.add('parent-tap'),
        child: SizedBox(
          width: 160,
          height: 160,
          child: Center(
            child: Listener(
              onPointerDown: (_) => events.add('child-down'),
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => events.add('child-tap'),
                child: const SizedBox(width: 80, height: 80),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

点击中间 80 × 80 的子区域时，两个 Listener 都能观察到按下，但普通父子点击竞争由子识别器获胜，只有 child-tap。点击父区域内、子区域外的位置时，子识别器没有进入这次命中路径，父组件可以得到 parent-tap。

如果需要记录“用户按下了页面”，Listener 可以提供原始观察，但不要把每次 onPointerDown 都计成一次业务点击。按下之后还可能滚动、取消，或者在别处抬起。

3. 手势竞技场

卡 · 父子都有 onTap，为什么通常只有子组件响应？改成 opaque 有用吗？卡 · onTapDown 后收到 onTapCancel，是否说明系统取消了指针？

3.1 识别器逐步判断输入意图

手势识别器根据一段输入判断某种动作是否成立，例如 TapGestureRecognizer 判断点击，VerticalDragGestureRecognizer 判断纵向拖动。多个识别器可能在开始时都认为自己有机会，框架通过手势竞技场（gesture arena）协调竞争。

对某个 pointer，识别器先加入竞技场，再根据移动距离、方向和时间等条件接受或拒绝。基本规则是首先接受的成员，或最后一个没有拒绝的成员获胜；关闭加入、延迟裁决和抬起后的清理也参与这一过程。不要把它简化成“所有手势都由最内层组件获胜”。

普通父子点击的例子里，子识别器先进入竞争，最终获得点击；但列表的拖动识别器可以在手指明显移动后接受拖动，让子项的点击识别器失败。前者是特定竞争结果，不是渲染树层级决定全部手势的规则。

3.2 按压反馈需要处理取消

onTapDown 表示存在可能形成点击的按下。识别器可能在短暂等待后调用它，也可能因为已经获胜而调用它；回调发生时不一定已经完成整个点击。

若随后滚动识别器获胜，点击识别器会取消这次点击。界面应撤销临时按压高亮，而不是执行跳转或提交。真正的点击动作放在 onTap；onTapCancel 用于清理未成功的点击状态。

手势取消和原始指针取消不是一回事。 子项的 onTapCancel 可以因为列表拖动获胜而发生，此时原始指针仍在正常移动，最后也可能正常抬起。PointerCancelEvent 则表示这次指针输入被取消；两者都需要处理，但不能互相代替。

同时支持单击和双击时，识别器还要等待区分两种意图，单击响应可能因此延后。不要为“更快”在 onTapDown 中提前执行不可撤销的点击业务。

4. 命中行为与遮挡

卡 · 父子都有 onTap，为什么通常只有子组件响应？改成 opaque 有用吗？卡 · IgnorePointer 与 AbsorbPointer 对后方按钮有什么不同影响？卡 · translucent 能保证 Stack 中上下两个 GestureDetector 都收到 onTap 吗？

4.1 behavior 控制命中，不承诺赢得手势

HitTestBehavior 控制目标如何参与其范围内的命中测试：

取值	主要作用
deferToChild	子节点命中时，当前目标才参与
opaque	当前范围本身可以命中，并阻挡视觉后方目标的命中
translucent	当前范围可以加入命中结果，同时允许命中测试继续考虑后方目标

这里的 opaque 与 translucent 描述命中行为，不是颜色透明度。一个不可见的 SizedBox 也可以通过 opaque 形成点击区域。命中区域仍受实际布局尺寸和祖先命中规则限制，不会无限扩大。

translucent 也不是“强制所有后方组件收到事件”。后方是否继续命中，要结合父容器的遍历和子节点返回结果判断。Flutter 3.24.3 的 RenderProxyBoxWithHitTestBehavior 在子节点已经命中时仍返回命中；Stack 等父容器因此可能不再访问更下层的兄弟节点。

对父子 GestureDetector，把 behavior 改成 opaque 或 translucent，不会让父组件绕过竞技场直接获得 onTap。应先确认是未进入命中路径，还是进入后输掉了识别竞争。

4.2 IgnorePointer 与 AbsorbPointer

IgnorePointer(ignoring: true) 使自身与子树不参与指针命中，父容器可以继续寻找后方目标。AbsorbPointer(absorbing: true) 在自身范围内吸收命中，阻止子树接收输入，也可能挡住后方兄弟节点；祖先仍可能属于接收路径。

两者都会照常占据布局空间并绘制子树。它们不等于隐藏界面，也不代替请求去重、权限检查或按钮的业务状态。需要一个禁用按钮时，应优先使用按钮本身的禁用能力，使视觉、语义和交互状态保持一致。

在 Flutter 3.24.3 中，这两种阻止指针输入的方式会影响相关语义动作，但不应据此推断整个子树的说明文字都被删除。可访问性还需要按实际控件和语义配置检查。

5. 列表滚动与自定义拖动

卡 · Flutter 中滑动 ListView 时，事件处理与组件缓存怎样协作？

5.1 点击子项与纵向滚动可以竞争

纵向 ListView 的滚动结构会参与纵向拖动识别，子项可以同时参与点击识别。手指短按并抬起时可以形成点击；出现足够的纵向移动后，滚动识别器可能获胜，点击被取消，后续移动更新滚动位置。

滚动位置变化后，视口再按需要布局新的子项。输入识别与子项缓存是两个相接但不同的机制：手势不会直接把全部列表项目创建出来。可见附近的预布局、保活和业务缓存见 Flutter 布局与渲染。

5.2 为子项声明实际需要的方向

如果列表子项需要横向滑动操作，可以先声明横向拖动，而不是用覆盖所有方向的 pan 识别：

Widget horizontalAction({
  required VoidCallback onTap,
  required ValueChanged<double> onHorizontalDelta,
}) {
  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: onTap,
    onHorizontalDragUpdate: (details) {
      onHorizontalDelta(details.delta.dx);
    },
    child: const SizedBox(width: 200, height: 64),
  );
}