Flutter:如何響應觸控事件

CoorChice發表於2019-04-06

目錄傳送門:《Flutter快速上手指南》先導篇

除了 GestureDetector,Flutter 還提供了 Listener 來監聽觸控事件。

它也是一個 Widget,使用它包裹一個 Widget,就能能夠處理該 Widget 上發生的觸控事件。

1. Listener 的常用屬性

看看通過 Listener 可以處理哪些事件:

屬性型別說明
onPointerDown(PointerDownEvent event){}按下時觸發
onPointerMove(PointerDownEvent event){}移動時觸發
onPointerEnter(PointerDownEvent event){}進入Widget區域時觸發
onPointerExit(PointerDownEvent event){}離開Widget區域時觸發
onPointerUp(PointerDownEvent event){}離開螢幕時觸發
onPointerDown(PointerDownEvent event){}按下時觸發
onPointerCancel(PointerDownEvent event){}取消觸控時觸發
behaviorHitTestBehavior控制事件傳遞。這個下面再說明

1.1 Listener 的使用

先看看例子?:

Listener(
  onPointerUp: (e){
    Navigator.pop(context);
  },
  child: Container(
    height: 80,
    color: Colors.blue,
    alignment: Alignment.center,
    child: Text(
      text,
      style: TextStyle(
          color: Colors.white, decoration: TextDecoration.none),
    ),
  ),
)
複製程式碼

還是那套用法,使用它去包裹要處理事件的 Widget 節點,就相當於使節點獲得處理事件的能力。

1.2 HitTestBehavior

HitTestBehavior 用於控制事件的傳遞方式。

  • HitTestBehavior.deferToChild

    只有有子 Widget 通過了 Hit-Test,才接收一系列的事件,接收區域也會被限制在該子 Widget 區域中。

  • HitTestBehavior.opaque

    Widget 能夠通過 Hit-Test,接收事件,且能阻止在它之前的 Widget(直觀來看就是被它擋住的 Widget)接收事件。

    簡單來說就是事件 不能透傳

  • HitTestBehavior.translucent

    Widget 能夠通過 Hit-Test,接收事件,且不會阻止它之前的 Widget(直觀來看就是被它擋住的 Widget)接收事件。

    簡單來說就是事件 能透傳

1.3 PointerEvent

PointerEvent 是 Listener 回撥中的引數,儲存了一系列的觸控資訊。

看看一些比較常用的屬性:

屬性型別說明
pointerint標示一次觸控id。重新觸控會分配新的值
kindPointerDeviceKind觸控事件的輸入型別。是觸控,還是滑鼠..
positionOffset當前座標。相對於全域性座標
deltaOffset指標移動期間,與上一次事件的移動距離
pressuredouble按壓力度。取值範圍 0.0-1.0

2.不接收觸控事件 - IgnorePointer

如果不想讓一個 Widget 接收觸控事件,那就用 IgnorePointer 包裹它好了。

IgnorePointer(
   ignoring: true,
   child: MyWidget(),
)
複製程式碼

使用比較簡單,ignoring 控制是否忽略,預設為 true。

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章