Flutter学习笔记(32)--PointerEvent事件处理

如需转载,请注明出处:Flutter学习笔记(32)--PointerEvent事件处理 在Android原生的开发中,对于事件的处理,我们都知道事件分为down、move、up事件,对于ViewGroup有事件分发、拦截和消费...

如需转载,请注明出处: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、onPointerMoveonPointerUp
demo很简单,就是响应用户的触摸操作,然后打印指针坐标。

忽略PointerEvent

假如我们不想让某个子树响应 PointerEvent的话,我们可以使用 IgnorePointerAbsorbPointer,这两个组件都能阻止子树接收指针事件,不同之处在于 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,则两个都不会输出。
  • 发表于 2020-06-27 19:14
  • 阅读 ( 109 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除