美文网首页
Flutter(三十三)屏幕指针事件

Flutter(三十三)屏幕指针事件

作者: 天色将变 | 来源:发表于2019-07-20 10:38 被阅读0次

对于屏幕手指的触摸,使用Listener进行监听,Listener是一个功能Widget,内部具有屏幕事件的响应。

指针事件
  • onPointerDown,// 手指按下时调用

  • onPointerMove,// 手指移动时调用

  • onPointerUp,// 手指抬起时调用

  • onPointerEnter,// 待确定

  • onPointerExit,// 待确定

  • onPointerHover,// 待确定

  • onPointerCancel,// 待确定

  • onPointerSignal,// 待确定

  • behavior = HitTestBehavior.deferToChild,// 待确定

image.png
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Listener(
            onPointerEnter: (PointerEnterEvent event) => setState(() {
              print("onPointerEnter");
            }),
            onPointerDown: (PointerDownEvent event) => setState(() {
              print("onPointerDown");
            }),
            onPointerMove: (PointerMoveEvent event) => setState(() {
              print("onPointerMove");
            }),
            onPointerUp: (PointerUpEvent event) => setState(() {
              print("onPointerUp");
            }),
            onPointerExit: (PointerExitEvent event) => setState(() {
              print("onPointerExit");
            }),
            onPointerCancel: (PointerCancelEvent event) => setState(() {
              print("onPointerCancel");
            }),
            onPointerHover: (PointerHoverEvent event) => setState(() {
              print("onPointerHover");
            }),
            onPointerSignal: (PointerSignalEvent event) => setState(() {
              print("onPointerSignal");
            }),
            child: Center(
              child: Container(
                width: 200,
                height: 150,
                color: Colors.red[200],
                alignment: Alignment.center,
                child: Text(
                  "Pointer event,behavior=deferToChild",
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            behavior: HitTestBehavior.deferToChild,
          ),
          Listener(
            onPointerEnter: (PointerEnterEvent event) => setState(() {
              print("onPointerEnter");
            }),
            onPointerDown: (PointerDownEvent event) => setState(() {
              print("onPointerDown");
            }),
            onPointerMove: (PointerMoveEvent event) => setState(() {
              print("onPointerMove");
            }),
            onPointerUp: (PointerUpEvent event) => setState(() {
              print("onPointerUp");
            }),
            onPointerExit: (PointerExitEvent event) => setState(() {
              print("onPointerExit");
            }),
            onPointerCancel: (PointerCancelEvent event) => setState(() {
              print("onPointerCancel");
            }),
            onPointerHover: (PointerHoverEvent event) => setState(() {
              print("onPointerHover");
            }),
            onPointerSignal: (PointerSignalEvent event) => setState(() {
              print("onPointerSignal");
            }),
            child: Center(
              child: Container(
                width: 200,
                height: 150,
                color: Colors.blue[200],
                alignment: Alignment.center,
                child: Text(
                  "Pointer event,behavior=opaque",
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            behavior: HitTestBehavior.opaque,
          ),
          Listener(
            onPointerEnter: (PointerEnterEvent event) => setState(() {
              print("onPointerEnter");
            }),
            onPointerDown: (PointerDownEvent event) => setState(() {
              print("onPointerDown");
            }),
            onPointerMove: (PointerMoveEvent event) => setState(() {
              print("onPointerMove");
            }),
            onPointerUp: (PointerUpEvent event) => setState(() {
              print("onPointerUp");
            }),
            onPointerExit: (PointerExitEvent event) => setState(() {
              print("onPointerExit");
            }),
            onPointerCancel: (PointerCancelEvent event) => setState(() {
              print("onPointerCancel");
            }),
            onPointerHover: (PointerHoverEvent event) => setState(() {
              print("onPointerHover");
            }),
            onPointerSignal: (PointerSignalEvent event) => setState(() {
              print("onPointerSignal");
            }),
            child: Center(
              child: Container(
                width: 200,
                height: 150,
                color: Colors.green[200],
                alignment: Alignment.center,
                child: Text(
                  "Pointer event,behavior=translucent",
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            behavior: HitTestBehavior.translucent,
          ),
        ],
      ),
    );
  }
}
欢迎添加我的微信号:zrf540592766
欢迎关注我的公众号:Flutter和Dart开发实践
让我们共同学习进步,It is never too late to learn!
image.png

相关文章

  • Flutter(三十三)屏幕指针事件

    对于屏幕手指的触摸,使用Listener进行监听,Listener是一个功能Widget,内部具有屏幕事件的响应。...

  • Flutter 小技巧——手势处理

    Flutter手势处理 在Flutter中的手势事件分为两层。第一层有原始指针事件,它描述了屏幕上指针(例如,触摸...

  • Flutter_点击事件和手势

    Flutter_点击事件和手势 Flutter中的手势系统有两个独立的层。第一层具有原始指针事件,其描述屏幕上指针...

  • 7 手势、自定义Widget

    手势 Flutter中的手势系统有两个独立的层。第一层为原始指针(pointer)事件,它描述了屏幕上指针(例如,...

  • Flutter学习笔记29-手势监听

    Flutter中手势有两个不同的层次:1.原始指针事件(Pointer Events):描述了屏幕上由触摸板、鼠标...

  • Flutter笔记八之事件监听

    Flutter把事件监听分成两个部分,分别是原始指针事件(Pointer Events)和手势识别(Gesture...

  • Flutter了解之手势

    1. 原始指针事件 (移动设备上通常为触摸事件) 描述了屏幕上指针(触摸、鼠标、触控笔)的位置和移动。 监听 Fl...

  • Flutter开发 -- [15 - 事件监听]

    一. 事件监听 在Flutter中,手势有两个不同的层次: 第一层:原始指针事件(Pointer Events):...

  • Flutter-指针事件知识

    在 开发当中,我们可能会遇到下面的需求: 定位用户手指当前处于的位置,以及点击了多少次。 遇到这种需求,我们就需要...

  • Day12 - Flutter - 事件监听

    概述 事件监听 跨组件事件 一、事件监听 1.1、在Flutter中,手势的两个不同的层次第一层:原始指针事件(P...

网友评论

      本文标题:Flutter(三十三)屏幕指针事件

      本文链接:https://www.haomeiwen.com/subject/pwyylctx.html