关于flutter模拟手势的信息

Flutter（五）手势GestureDetector

在Android中，每一个 View 都可以通过 onTouch 方法重写其触摸事件，也可以通过 setOnClickListener 方法来给 View 设置点击事件。但是Flutter中除了少部分组件，如 Button 相关的组件可以直接通过 onPressed 实现点击事件。其余组件想实现点击、长按等事件，都需要借助 GestureDetector 来实现手势监听

下面介绍比较常用的手势如 onTap （点击）、 onDoubleTap （双击）、 onLongPress （长按）

小球跟随手指移动的实现应该是属于各种移动端框架作为了解拖动手势的的典型案例，下面我们来看看用flutter如何实现小球跟随手指移动

拖动手势主要由 onPanDown （手指按下）、 onPanUpdate （手指滑动）、 onPanEnd （滑动结束）构成

缩放手势需要用到 onScaleUpdate 方法，下面是一个简单的图片缩放的实现

相关问答

Q1: Flutter手势（粘贴即用 flutter 1.22.6）

import 'package:flutter/material.dart';

void main() = runApp(MyApp());

class MyAppextends StatelessWidget {

// This widget is the root of your application.

  @override

  Widgetbuild(BuildContext context) {

return MaterialApp(

title:'Flutter Demo',

      theme:ThemeData(

primarySwatch: Colors.blue, splashColor: Colors.transparent),

      home:HYHomePage(),

    );

  }

}

class HYHomePageextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text("列表测试"),

      ),

      body:GestureDemo(),

      // Center(

//  child: Stack(

//    alignment: Alignment.center,

//    children: [

//      GestureDetector(

//        onTapDown: (details) {

//          print("outer click");

//        },

//        child: Container(

//          width: 200,

//          height: 200,

//          color: Colors.yellow,

//          alignment: Alignment.center,

//        ),

//      ),

//      IgnorePointer(

//        child: GestureDetector(

//          onTapDown: (details) {

//            print("inner click");

//          },

//          child: Container(

//            width: 100,

//            height: 100,

//            color: Colors.red,

//          ),

//        ),

//      )

//    ],

//  ),

// ),

    );

  }

}

class GestureDemoextends StatelessWidget {

const GestureDemo({

Key key,

  }) :super(key: key);

  @override

  Widgetbuild(BuildContext context) {

return Center(

child:GestureDetector(

onTapDown: (details) {

print("手指按下");

          print(details.globalPosition);

          print(details.localPosition);

        },

        onTapUp: (details) {

print("手指抬起");

        },

        onTapCancel: () {

print("手势取消");

        },

        onTap: () {

print("手势点击");

        },

        onDoubleTap: () {

print("手指双击");

        },

        onLongPress: () {

print("长按手势");

        },

        onPanUpdate: (value){

print('当前我在滑动$value');

        },

        child:Container(

width:200,

          height:200,

          color: Colors.orange,

        ),

      ),

    );

  }

}

class ListenerDemoextends StatelessWidget {

const ListenerDemo({

Key key,

  }) :super(key: key);

  @override

  Widgetbuild(BuildContext context) {

return Listener(

onPointerDown: (event) {

print("指针按下:$event");

        print(event.position);

        print(event.localPosition);

      },

      onPointerMove: (event) {

//            print("指针移动:$event");

      },

      onPointerUp: (event) {

//            print("指针抬起:$event");

      },

      child:Container(

width:200,

        height:200,

        color: Colors.red,

      ),

    );

  }

}

Q2: Flutter 之 交互

手势操作在 Flutter 中分为两类：

第一类是原始的指针事件（Pointer Event），即原生开发中常见的触摸事件，表示屏幕上触摸（或鼠标、手写笔）行为触发的位移行为；

第二类则是手势识别（Gesture Detector），表示多个原始指针事件的组合操作，如点击、双击、长按等，是指针事件的语义化封装。

指针事件表示用户交互的原始触摸数据，如手指接触屏幕 PointerDownEvent、手指在屏幕上移动 PointerMoveEvent、手指抬起 PointerUpEvent，以及触摸取消 PointerCancelEvent。在手指接触屏幕，触摸事件发起时，Flutter 会确定手指与屏幕发生接触的位置上究竟有哪些组件，并将触摸事件交给最内层的组件去响应。事件会从这个最内层的组件开始，沿着组件树向根节点向上冒泡分发。通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件，或者交给其视图层级之下的组件去响应。关于组件层面的原始指针事件的监听，Flutter 提供了 Listener Widget，可以监听其子 Widget 的原始指针事件。

Listener(

  child: Container(

    color: Colors.black,

    width: 300,

    height: 300,

  ),

  onPointerDown: (event) = print("down $event"),// 手势按下回调

  onPointerMove:  (event) = print("move $event"),// 手势移动回调

  onPointerUp:  (event) = print("up $event"),// 手势抬起回调

);

Gesture 是手势语义的抽象，而如果我们想从组件层监听手势，则需要使用 GestureDetector 。GestureDetector 是一个处理各种高级用户触摸行为的 Widget，与 Listener 一样，也是一个功能性组件。

GestureDetector(// 手势识别

        child: Container(color: Colors.red,width: 50,height: 50),// 红色子视图

        onTap: ()=print("Tap"),// 点击回调

        onDoubleTap: ()=print("Double Tap"),// 双击回调

        onLongPress: ()=print("Long Press"),// 长按回调

        onPanUpdate: (e) {// 拖动回调

          setState(() {

            // 更新位置

            _left += e.delta.dx;

            _top += e.delta.dy;

          });

        },

      ),

Q3: Flutter了解之手势

描述了屏幕上指针（触摸、鼠标、触控笔）的位置和移动。

Flutter中可以使用Listener(功能性组件)来监听原始触摸事件

例1

例2

例3

忽略PointerEvent

手势: 描述由一个或多个指针移动组成的语义动作，如拖动、缩放、双击等。

Material大多数widget已经对tap或手势做出了响应。 例如 IconButton和 FlatButton 响应单击，ListView响应滑动事件触发滚动。

用于手势识别的功能性组件，通过它可以来识别各种手势。

例（单击）

例（添加Material触摸水波效果 InkWell组件）

例（滑动关闭 Dismissable组件）

例（单击、双击、长按）

例（滑动）

例（扫动---单一方向）

例（缩放）

GestureRecognizer是一个抽象类。

一种手势的识别器对应一个GestureRecognizer的子类。

例

由于手势竞争最终只有一个胜出者，所以，当有多个手势识别器时，可能会产生冲突。

例

例

在APP中经常会需要一个广播机制，用以跨页面通知。比如一个需要登录的APP中，页面会关注用户登录或注销事件，来进行一些状态更新。

这时候，一个事件总线便会非常有用，事件总线通常实现了订阅者模式，订阅者模式包含发布者和订阅者两种角色，可以通过事件总线来触发事件和监听事件。

对于一些简单的应用，事件总线是足以满足业务需求的，如果决定使用状态管理包的话，一定要想清楚APP是否真的有必要使用它，防止“化简为繁”、过度设计。

例

在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。

Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。

通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。

通知冒泡和Web开发中浏览器事件冒泡原理是相似的，都是事件从出发源逐层向上传递，可以在上层节点任意位置来监听通知/事件，也可以终止冒泡过程，终止冒泡后，通知将不会再向上传递。

Flutter的UI框架实现中，除了在可滚动组件在滚动过程中会发出ScrollNotification之外，还有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，Flutter正是通过这种通知机制来使父元素可以在一些特定时机来做一些事情。

例

例

例

阻止冒泡

通知冒泡原理