A brief analysis of the difference between Flutter AbsorbPointer and IgnorePointer

What is Flutter?

Flutter is a new SDK for Google for building cross-platform mobile apps. Write a copy of code that works on both Android and iOS platforms.

AbsorbPointer

AbsorbPointer is a control that prohibits user input, such as clicking buttons, inputting input boxes, scrolling ListView, etc. You may say that the buttons areonPressedSet to null, it can be implemented as well. Yes, but AbsorbPointer can provide unified control of multiple components without you having to set it for each component separately.

The usage is as follows:

AbsorbPointer(
 child: Row(
  children: <Widget>[
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),

  ],
 ),
)

By default, whether these buttons respond to click events, if you want to respond to click events, you only need to set itabsorbingJust false:

AbsorbPointer(
 absorbing: false,
 ...
)

IgnorePointer

The usage of IgnorePointer is the same as that of AbsorbPointer, and the effect is the same. The usage is as follows:

IgnorePointer(
 child: Row(
  children: <Widget>[
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),
   RaisedButton(onPressed: (){},),
  ],
 ),
)

the difference

AbsorbPointerIt can receive click events and consume events, andIgnorePointerThe click event cannot be received, and the controls under it can receive the click event (not a child control).

If there are 2 boxes, a 200x200 red box, a 100x100 blue box, the blue box is located above the red box and the center displays, add a click event to the 2 boxes, as follows:

return Container(
   height: 200,
   width: 200,
   child: Stack(
    alignment: ,
    children: <Widget>[
     Listener(
      onPointerDown: (v) {
       print('click red');
      },
      child: Container(
       color: ,
      ),
     ),
     Listener(
      onPointerDown: (v) {
       print('click red');
      },
      child: Container(
       color: ,
       width: 100,
       height: 100,
      ),
     ),
    ],
   ),
  );

When clicking on the blue box, print the result:

flutter: click blue

Click on the red box outside the blue box area to print the result:

flutter: click red

UseAbsorbPointerPackage blue box:

return Container(
 height: 200,
 width: 200,
 child: Stack(
  alignment: ,
  children: <Widget>[
   Listener(
    onPointerDown: (v) {
     print('click red');
    },
    child: Container(
     color: ,
    ),
   ),
   Listener(
    onPointerDown: (v) {
     print('click blue self');
    },
    child: AbsorbPointer(
     child: Listener(
      onPointerDown: (v) {
       print('click blue child');
      },
      child: Container(
       color: ,
       width: 100,
       height: 100,
      ),
     ),
    ),
   ),
  ],
 ),
);

Click on the blue box and print it as follows:

flutter: click blue self

illustrateAbsorbPointerThe click event itself willAbsorbPointerChange toIgnorePointer, print as follows:

flutter: click red

The click event penetrates the blue box to the red box, and the red box receives the click event.

Use scenarios

1. Disable/enable multiple components according to business needs.

2. Disable/enable the entire app according to business needs.

comminicate

Github address:/781238222/flutter-do

Detailed usage of 170+ components:

Summarize

This is the end of this article about a brief analysis of the difference between Flutter AbsorbPointer and IgnorePointer. For more information about the differences between Flutter AbsorbPointer and IgnorePointer, please search for my previous articles or continue to browse the related articles below. I hope everyone will support me in the future!