1. 程式人生 > 程式設計 >淺析Flutter AbsorbPointer 與 IgnorePointer的區別

淺析Flutter AbsorbPointer 與 IgnorePointer的區別

Flutter是什麼?

Flutter是Google一個新的用於構建跨平臺的手機App的SDK。寫一份程式碼,在Android 和iOS平臺上都可以執行。

AbsorbPointer

AbsorbPointer是一種禁止使用者輸入的控制元件,比如按鈕的點選、輸入框的輸入、ListView的滾動等,你可能說將按鈕的onPressed設定為null,一樣也可以實現,是的,但AbsorbPointer可以提供多元件的統一控制,而不需要你單獨為每一個元件設定。

用法如下:

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

預設情況下,這些按鈕是否響應點選事件的,如果想要響應點選事件只需設定absorbing為false即可:

AbsorbPointer(
 absorbing: false,...
)

IgnorePointer

IgnorePointer的用法和AbsorbPointer一樣,而且達到的效果一樣,用法如下:

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

區別

AbsorbPointer本身可以接收點選事件,消耗掉事件,而IgnorePointer

無法接收點選事件,其下的控制元件可以接收到點選事件(不是子控制元件)。

如果有2個盒子,一個200x200的紅色盒子,一個100x100的藍色盒子,藍色盒子位於紅色盒子之上居中顯示,給2個盒子新增點選事件,如下:

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,);

點選藍色盒子時,列印結果:

flutter: click blue

點選藍色盒子區域以外的紅色盒子,列印結果:

flutter: click red

此時用AbsorbPointer包裹藍色盒子:

return Container(
 height: 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');
      },);

點選藍色盒子,列印如下:

flutter: click blue self

說明AbsorbPointer本身接收到了點選事件,將AbsorbPointer改為IgnorePointer,列印如下:

flutter: click red

點選事件穿透藍色盒子到紅色盒子,紅色盒子接收到了點選事件。

使用場景

1、根據業務需求禁用/啟用多個元件。

2、根據業務需求禁用/啟用整個App。

交流

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

170+元件詳細用法:http://laomengit.com

總結

到此這篇關於淺析Flutter AbsorbPointer 與 IgnorePointer的區別的文章就介紹到這了,更多相關Flutter AbsorbPointer 與 IgnorePointer的區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!