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

CurtisWgh發表於2020-06-18
Flutter筆記事件

如需轉載，請註明出處：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，則兩個都不會輸出。

 

相關文章