淺析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的區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!