Flutter 父子组件如何都能收到点击事件

在实际项目中，在使用点击事件时，由于需求设计问题，需要子组件和父组件都能收到onTap回调，故会出现类似下面demo中的源码。

 

 按照Flutter 点击事件的设计思路，这样的源码肯定是满足不了需求，在点击组件时，只有子组件会有回调打印，父组件是没有回调的。

那父组件怎么样才能也收到长按事件呢。我们按照以下修改可以满足需求

/// Created by wuliquan on 19.7.22.
/// 测试页面
class SecondPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SecondPageState();
  }
}

class SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RawGestureDetector(
          gestures: {
            AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<AllowMultipleGestureRecognizer>(
              () => AllowMultipleGestureRecognizer(),
              (AllowMultipleGestureRecognizer instance) {
                instance.onTap = () => print('tap on parent ');
              },
            )
          },
          //Parent Container
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            alignment: Alignment.center,
            child: GestureDetector(
              onLongPress: () {
                print('tap on child');
              },
              child: Container(
                width: 50,
                height: 50,
                color: Colors.orange,
              ),
            ),
          )),
    );
  }
}

class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

使用RawGestureDetector包裹手势识别器AllowMultipleGestureRecognizer

AllowMultipleGestureRecognizer是我们继承TapGestureRecognizer 
复写了rejectGesture方法

  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }

重点：

这个方法在手势识别器在手势竞技场竞争失败后，我们手动处理，让它可以继续处理手势，从而我们父组件也能收到回调打印日志

这里简单说明下手势竞技的规则，在分配手势时按照深度优先的策略进行，这里由于我们只是注册了最简单的onTap回调，在底层上报up事件时，会直接返回命中测试组件列表中最后的那个组件，也就是深度最深的那个组件，也就是子组件。

以上面例子说明，在竞技场宣布子组件获胜后，会通知父组件的rejectGesture。由于我们复写了rejectGesture方法，让父手势识别器继续工作。