Flutter學習筆記（32）--PointerEvent事件處理

如需轉載，請註明出處：Flutter學習筆記（32）--PointerEvent事件處理

在Android原生的開發中，對於事件的處理，咱們都知道事件分爲down、move、up事件，對於ViewGroup有事件分發、攔截和消費處理，對於View有分發和消費處理，在Flutter中也是同樣，事件分爲down、move、up事件。

在Flutter中對事件的監聽是經過Listener來監聽原始觸摸事件，Listener的構造方法以下：

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

先看一下demo示例：

import 'package:flutter/material.dart';

class PointerEventDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PointerEventDemo',
      home: _PointerEventDemoHome(),
    );
  }
}

class _PointerEventDemoHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PointerEventDemoHomeState();
  }
}

class _PointerEventDemoHomeState extends State {
  PointerEvent _event;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('PointerEventDemo'),
        ),
        body: new Container(
          alignment: Alignment.center,
          color: Colors.red,
          width: 400,
          height: 300,
          child: new Listener(
            child: new Container(
              alignment: Alignment.center,
              color: Colors.tealAccent,
              width: 200.0,
              height: 150.0,
              child: new Text(
                _event?.toString() ?? '',
                style: new TextStyle(color: Colors.red),
              ),
            ),
            //不一樣響應時的處理
            onPointerDown: (PointerDownEvent event) =>
                setState(() => _event = event),
            onPointerMove: (PointerMoveEvent event) =>
                setState(() => _event = event),
            onPointerUp: (PointerUpEvent event) =>
                setState(() => _event = event),
            behavior: HitTestBehavior.translucent,
          ),
        ),
      ),
    );
  }
}

Listener自己是一個功能組件，它用來監聽內部組件的觸摸事件，事件會從最內層的widget一直向上冒泡到最外層的widget，監聽到了用戶的觸摸事件，會回調到對應的響應處理onPointerDown、onPointerMove、onPointerUp。
demo很簡單，就是響應用戶的觸摸操做，而後打印指針座標。

忽略PointerEvent

假如咱們不想讓某個子樹響應 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"),
)

點擊 Container時，因爲它在 AbsorbPointer的子樹上，因此不會響應指針事件，因此日誌不會輸出"in"，但 AbsorbPointer自己是能夠接收指針事件的，因此會輸出"up"。若是將 AbsorbPointer換成 IgnorePointer，則兩個都不會輸出。