How can Flutter parent and child components receive click events

In the actual project, when using the click event, due to the requirement design problem, both the child component and the parent component need to receive the onTap callback, so the source code similar to the demo below will appear.

According to the design idea of ​​Flutter's click event, such a source code will definitely not meet the requirements. When a component is clicked, only the child component will have a callback print, and the parent component will not have a callback.

How can the parent component also receive the long press event?We can meet the needs according to the following modifications

/// Created by wuliquan on 19.7.22./// Test pageclass SecondPage extends StatefulWidget {@overrideState createState() {return SecondPageState();}}class SecondPageState extends State {@overrideWidget build(BuildContext context) {return Center(child: RawGestureDetector(gestures: {AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers(() => AllowMultipleGestureRecognizer(),(AllowMultipleGestureRecognizer instance) {instance.onTap = () => print('tap on parent ');},)},//Parent Containerchild: 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 {@overridevoid rejectGesture(int pointer) {acceptGesture(pointer);}}

Use RawGestureDetector to wrap gesture recognizer AllowMultipleGestureRecognizer

AllowMultipleGestureRecognizer is our inheritance TapGestureRecognizerOverride the rejectGesture method

 @overridevoid rejectGesture(int pointer) {acceptGesture(pointer);}

Focus:

This method is handled manually after the gesture recognizer fails to compete in the gesture arena, so that it can continue to process the gesture, so that our parent component can also receive a callback printJournal

Here is a brief description of the rules of gesture competition. When assigning gestures, follow the depth-first strategy. Since we only registered the simplest onTap callback, it will be reported at the bottom.When the up event occurs, it will directly return the last component in the list of hit test components, that is, the component with the deepest depth, that is, the child component.

In the above example, after the arena declares the victory of the child component, the rejectGesture of the parent component will be notified.Since we overridden the rejectGesture method, the parent gesture recognizer continues to work.