Flutter實(shí)戰(zhàn) 原始指針事件處理

本節(jié)先來介紹一下原始指針事件(Pointer Event，在移動設(shè)備上通常為觸摸事件)，下一節(jié)再介紹手勢處理。

在移動端，各個平臺或 UI 系統(tǒng)的原始指針事件模型基本都是一致，即：一次完整的事件分為三個階段：手指按下、手指移動、和手指抬起，而更高級別的手勢（如點(diǎn)擊、雙擊、拖動等）都是基于這些原始事件的。

當(dāng)指針按下時(shí)，F(xiàn)lutter 會對應(yīng)用程序執(zhí)行命中測試(Hit Test)，以確定指針與屏幕接觸的位置存在哪些組件（widget）， 指針按下事件（以及該指針的后續(xù)事件）然后被分發(fā)到由命中測試發(fā)現(xiàn)的最內(nèi)部的組件，然后從那里開始，事件會在組件樹中向上冒泡，這些事件會從最內(nèi)部的組件被分發(fā)到組件樹根的路徑上的所有組件，這和 Web 開發(fā)中瀏覽器的事件冒泡機(jī)制相似， 但是 Flutter 中沒有機(jī)制取消或停止“冒泡”過程，而瀏覽器的冒泡是可以停止的。注意，只有通過命中測試的組件才能觸發(fā)事件。

Flutter 中可以使用Listener來監(jiān)聽原始觸摸事件，按照本書對組件的分類，則Listener也是一個功能性組件。下面是Listener的構(gòu)造函數(shù)定義：

Listener({
  Key key,
  this.onPointerDown, //手指按下回調(diào)
  this.onPointerMove, //手指移動回調(diào)
  this.onPointerUp,//手指抬起回調(diào)
  this.onPointerCancel,//觸摸事件取消回調(diào)
  this.behavior = HitTestBehavior.deferToChild, //在命中測試期間如何表現(xiàn)
  Widget child
})

我們先看一個示例，后面再單獨(dú)討論一下behavior屬性。

...
//定義一個狀態(tài)，保存當(dāng)前指針位置
PointerEvent _event;
...
Listener(
  child: Container(
    alignment: Alignment.center,
    color: Colors.blue,
    width: 300.0,
    height: 150.0,
    child: Text(_event?.toString()??"",style: TextStyle(color: Colors.white)),
  ),
  onPointerDown: (PointerDownEvent event) => setState(()=>_event=event),
  onPointerMove: (PointerMoveEvent event) => setState(()=>_event=event),
  onPointerUp: (PointerUpEvent event) => setState(()=>_event=event),
),

運(yùn)行后效果如圖8-1所示：

手指在藍(lán)色矩形區(qū)域內(nèi)移動即可看到當(dāng)前指針偏移，當(dāng)觸發(fā)指針事件時(shí)，參數(shù)PointerDownEvent、PointerMoveEvent、PointerUpEvent都是PointerEvent的一個子類，PointerEvent類中包括當(dāng)前指針的一些信息，如：

• position：它是鼠標(biāo)相對于當(dāng)對于全局坐標(biāo)的偏移。
• delta：兩次指針移動事件（PointerMoveEvent）的距離。
• pressure：按壓力度，如果手機(jī)屏幕支持壓力傳感器(如iPhone的3D Touch)，此屬性會更有意義，如果手機(jī)不支持，則始終為1。
• orientation：指針移動方向，是一個角度值。

上面只是PointerEvent一些常用屬性，除了這些它還有很多屬性，讀者可以查看API文檔。

現(xiàn)在，我們重點(diǎn)來介紹一下behavior屬性，它決定子組件如何響應(yīng)命中測試，它的值類型為HitTestBehavior，這是一個枚舉類，有三個枚舉值：

• deferToChild：子組件會一個接一個的進(jìn)行命中測試，如果子組件中有測試通過的，則當(dāng)前組件通過，這就意味著，如果指針事件作用于子組件上時(shí)，其父級組件也肯定可以收到該事件。

• opaque：在命中測試時(shí)，將當(dāng)前組件當(dāng)成不透明處理(即使本身是透明的)，最終的效果相當(dāng)于當(dāng)前Widget的整個區(qū)域都是點(diǎn)擊區(qū)域。舉個例子：

  Listener(
      child: ConstrainedBox(
          constraints: BoxConstraints.tight(Size(300.0, 150.0)),
          child: Center(child: Text("Box A")),
      ),
      //behavior: HitTestBehavior.opaque,
      onPointerDown: (event) => print("down A")
  ),

上例中，只有點(diǎn)擊文本內(nèi)容區(qū)域才會觸發(fā)點(diǎn)擊事件，因?yàn)?deferToChild 會去子組件判斷是否命中測試，而該例中子組件就是 Text("Box A") 。 如果我們想讓整個300×150的矩形區(qū)域都能點(diǎn)擊我們可以將behavior設(shè)為HitTestBehavior.opaque。注意，該屬性并不能用于在組件樹中攔截（忽略）事件，它只是決定命中測試時(shí)的組件大小。

• translucent：當(dāng)點(diǎn)擊組件透明區(qū)域時(shí)，可以對自身邊界內(nèi)及底部可視區(qū)域都進(jìn)行命中測試，這意味著點(diǎn)擊頂部組件透明區(qū)域時(shí)，頂部組件和底部組件都可以接收到事件，例如：

  Stack(
    children: <Widget>[
      Listener(
        child: ConstrainedBox(
          constraints: BoxConstraints.tight(Size(300.0, 200.0)),
          child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.blue)),
        ),
        onPointerDown: (event) => print("down0"),
      ),
      Listener(
        child: ConstrainedBox(
          constraints: BoxConstraints.tight(Size(200.0, 100.0)),
          child: Center(child: Text("左上角200*100范圍內(nèi)非文本區(qū)域點(diǎn)擊")),
        ),
        onPointerDown: (event) => print("down1"),
        //behavior: HitTestBehavior.translucent, //放開此行注釋后可以"點(diǎn)透"
      )
    ],
  )

上例中，當(dāng)注釋掉最后一行代碼后，在左上角200*100范圍內(nèi)非文本區(qū)域點(diǎn)擊時(shí)（頂部組件透明區(qū)域），控制臺只會打印“down0”，也就是說頂部組件沒有接收到事件，而只有底部接收到了。當(dāng)放開注釋后，再點(diǎn)擊時(shí)頂部和底部都會接收到事件，此時(shí)會打?。?/p>

  I/flutter ( 3039): down1
  I/flutter ( 3039): down0

如果behavior值改為HitTestBehavior.opaque，則只會打印"down1"。

#忽略PointerEvent

假如我們不想讓某個子樹響應(yīng)PointerEvent的話，我們可以使用IgnorePointer和AbsorbPointer，這兩個組件都能阻止子樹接收指針事件，不同之處在于AbsorbPointer本身會參與命中測試，而IgnorePointer本身不會參與，這就意味著AbsorbPointer本身是可以接收指針事件的(但其子樹不行)，而IgnorePointer不可以。一個簡單的例子如下：

Listener(
  child: AbsorbPointer(
    child: Listener(
      child: Container(
        color: Colors.red,
        width: 200.0,
        height: 100.0,
      ),
      onPointerDown: (event)=>print("in"),
    ),
  ),
  onPointerDown: (event)=>print("up"),
)

點(diǎn)擊Container時(shí)，由于它在AbsorbPointer的子樹上，所以不會響應(yīng)指針事件，所以日志不會輸出"in"，但AbsorbPointer本身是可以接收指針事件的，所以會輸出"up"。如果將AbsorbPointer換成IgnorePointer，那么兩個都不會輸出。