快捷導(dǎo)航

淺析Flutter AbsorbPointer 與 IgnorePointer的區(qū)別

更新時(shí)間：2020年04月11日 09:02:23 作者：老孟程序員

Flutter是Google一個(gè)新的用于構(gòu)建跨平臺(tái)的手機(jī)App的SDK。這篇文章主要介紹了Flutter AbsorbPointer 與 IgnorePointer的區(qū)別,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Flutter是什么？

Flutter是Google一個(gè)新的用于構(gòu)建跨平臺(tái)的手機(jī)App的SDK。寫(xiě)一份代碼，在Android 和iOS平臺(tái)上都可以運(yùn)行。

AbsorbPointer

AbsorbPointer是一種禁止用戶輸入的控件，比如按鈕的點(diǎn)擊、輸入框的輸入、ListView的滾動(dòng)等，你可能說(shuō)將按鈕的onPressed設(shè)置為null，一樣也可以實(shí)現(xiàn)，是的，但AbsorbPointer可以提供多組件的統(tǒng)一控制，而不需要你單獨(dú)為每一個(gè)組件設(shè)置。

用法如下：

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

  ],
 ),
)

默認(rèn)情況下，這些按鈕是否響應(yīng)點(diǎn)擊事件的，如果想要響應(yīng)點(diǎn)擊事件只需設(shè)置absorbing為false即可：

AbsorbPointer(
 absorbing: false,
 ...
)

IgnorePointer

IgnorePointer的用法和AbsorbPointer一樣，而且達(dá)到的效果一樣，用法如下：

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

區(qū)別

AbsorbPointer本身可以接收點(diǎn)擊事件，消耗掉事件，而IgnorePointer無(wú)法接收點(diǎn)擊事件，其下的控件可以接收到點(diǎn)擊事件（不是子控件）。

如果有2個(gè)盒子，一個(gè)200x200的紅色盒子，一個(gè)100x100的藍(lán)色盒子，藍(lán)色盒子位于紅色盒子之上居中顯示，給2個(gè)盒子添加點(diǎn)擊事件，如下：

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

點(diǎn)擊藍(lán)色盒子時(shí)，打印結(jié)果：

flutter: click blue

點(diǎn)擊藍(lán)色盒子區(qū)域以外的紅色盒子，打印結(jié)果：

flutter: click red

此時(shí)用AbsorbPointer包裹藍(lán)色盒子：

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

點(diǎn)擊藍(lán)色盒子，打印如下：

flutter: click blue self

說(shuō)明AbsorbPointer本身接收到了點(diǎn)擊事件，將AbsorbPointer改為IgnorePointer,打印如下：

flutter: click red

點(diǎn)擊事件穿透藍(lán)色盒子到紅色盒子，紅色盒子接收到了點(diǎn)擊事件。

使用場(chǎng)景

1、根據(jù)業(yè)務(wù)需求禁用/啟用多個(gè)組件。

2、根據(jù)業(yè)務(wù)需求禁用/啟用整個(gè)App。

交流

Github地址：https://github.com/781238222/flutter-do

170+組件詳細(xì)用法：http://laomengit.com

總結(jié)

到此這篇關(guān)于淺析Flutter AbsorbPointer 與 IgnorePointer的區(qū)別的文章就介紹到這了,更多相關(guān)Flutter AbsorbPointer 與 IgnorePointer的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: