Flutter点击子TextButton时如何同时触发父GestureDetector的onTap事件

问题原因 #

Flutter手势系统存在手势竞争机制：多个手势识别器会通过竞争确定最终消费事件的组件，TextButton内部默认实现了点击手势，点击时会优先赢得竞争并消费事件，导致父层普通GestureDetector的tap手势被拒绝，无法触发回调。

方案1：使用Listener监听原始指针事件（推荐） #

Listener监听底层原始指针事件，不受手势竞争机制影响，无论子组件是否消费手势，父层都能收到事件回调，实现成本最低。

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    // 替换外层GestureDetector为Listener
    return Listener(
      // 监听指针抬起事件，和TextButton的onPressed触发时机对齐
      onPointerUp: (_) => print("GestureDetector tap"),
      child: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Column(
            children: [
              TextButton(
                child: Text("Button 1"),
                onPressed: () => print("Button 1 tap"),
              ),
              TextButton(
                child: Text("Button 2"),
                onPressed: () => print("Button 2 tap"),
              )
            ],
          )
      ),
    );
  }
}

注意：如果需要严格过滤为点击事件，可在onPointerUp回调中增加事件时长、指针偏移量的判断，过滤滑动、长按等其他操作触发的事件。

方案2：自定义手势识别器绕过竞争 #

如果必须使用GestureDetector的tap回调体系，可自定义点击手势识别器，强制让它无论竞争结果如何都触发回调：

1. 首先自定义手势识别器：

import 'package:flutter/gestures.dart';

class AlwaysRespondTapGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 竞争被拒绝时强制接受，触发tap回调
    acceptGesture(pointer);
  }
}

2. 使用RawGestureDetector替换外层普通GestureDetector：

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        AlwaysRespondTapGestureRecognizer: GestureRecognizerFactoryWithHandlers<AlwaysRespondTapGestureRecognizer>(
          () => AlwaysRespondTapGestureRecognizer(),
          (recognizer) => recognizer.onTap = () => print("GestureDetector tap"),
        )
      },
      child: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Column(
            children: [
              TextButton(
                child: Text("Button 1"),
                onPressed: () => print("Button 1 tap"),
              ),
              TextButton(
                child: Text("Button 2"),
                onPressed: () => print("Button 2 tap"),
              )
            ],
          )
      ),
    );
  }
}

以上两种方案运行后点击按钮，都会按预期输出：

Button 1 tap
GestureDetector tap

内容的提问来源于stack exchange，提问作者Coupido