[译]Flutter for Android Developers - Gesture Detection

在Flutter中怎样为一个Widget添加点击事件监听器

• in Android

  • 咱们一般调用一个View的setOnClickListener方法来监听一个View的点击事件。

• in Flutter

  • 咱们视状况不一样有两种实现方法，一是直接传递一个处理事件的方法给Widget，二是经过GestureDetector来实现事件监听与处理。

下面两个例子对两种实现方法作简要说明：

@override
Widget build(BuildContext context) {
  return new RaisedButton(
      onPressed: () {
        print("click");
      },
      child: new Text("Button"));
}
复制代码

这个例子描述了如何使用第一种方法实现点击事件监听。其实很简单，在构造RaisedButton时直接传递一个用于处理事件的方法给onPressed参数就能够了，当RaisedButton被点击时名为onPressed的参数所指向的方法就会被调用。在这里就是简单的打印出"click"。

Note： 这种方法仅当Widget自己已经支持事件监听时使用。好比这里的RaisedButton是系统提供的一个Widget，其自己已经支持了事件监听，因此能够直接在构造时传递一个用于处理事件的方法给它。

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
      child: new GestureDetector(
        child: new FlutterLogo(
          size: 200.0,
        ),
        onTap: () {
          print("tap");
        },
      ),
    ));
  }
}
复制代码

这个例子描述了如何使用第二种方法实现点击事件监听。这里的关键是GestureDetector，咱们将须要响应点击事件的Widget包裹到GestureDetector内部，而且传递一个用来处理点击事件的方法给GestureDetector的onTap参数，当点击事件发生时onTap所指向的方法就会被调用。在这里就是简单的打印出"tap"。

Note： 这种方法在Widget自己不支持事件监听时使用。

小结： 在Flutter中实现点击事件的监听处理有两种方法。 针对自己支持事件监听的Widget能够直接在构造Widget时传入一个方法用于点击事件处理。 针对自己不支持事件监听的Widget能够将其包裹在一个GestureDetector内部来实现点击事件处理。

在Flutter中怎样处理其余事件

• in Android

  1. 咱们能够经过各个组件提供的接口来设置相应的事件监听器来监听并处理咱们所关心的事件。
  2. 直接监听touch事件自行断定事件的类型并处理事件。
  3. 经过GestureDetector类来帮助监听各类手势事件。

• in Flutter

  • 也有一个GestureDetector类存在，利用它咱们能够监听不少事件。

在Flutter中GestureDetector能够监听如下事件：

• Tap

  • onTapDown 监听处理一个刚刚接触到屏幕的事件，相似于Android中Action为ACTION_DOWN的touch event。
  • onTapUp 监听处理一个接触屏幕后的离屏事件，相似于Android中Action为ACTION_UP的touch event。
  • onTap 监听处理一个点击事件，相似于Android中的onClick。
  • onTapCancel 相似Android中Action为ACTION_CANCEL的touch event。出现该事件的缘由多是从ACTION_DOWN到ACTION_UP的过程中由于手指移出可交互区或者其余异常致使的。

• Double tap

  • onDoubleTap 监听处理一个双击事件。

• Long press

  • onLongPress 监听处理一个长按事件。

• Vertical drag

  • onVerticalDragStart 监听处理一个垂直方向拖拽事件的开始。
  • onVerticalDragUpdate 监听处理一个垂直方向拖拽事件在拖拽过程当中的移动。
  • onVerticalDragEnd 监听处理一个垂直方向拖拽事件的结束。

• Horizontal drag

  • onHorizontalDragStart 监听处理一个水平方向拖拽事件的开始。
  • onHorizontalDragUpdate 监听处理一个水平方向的拖拽事件在拖拽过程当中的移动。
  • onHorizontalDragEnd 监听处理一个水平方向的拖拽事件的结束。

下面的例子简单展现了如何使用GestureDetector来监听一个Double tap事件：

AnimationController controller;
CurvedAnimation curve;

@override
void initState() {
  controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
          child: new GestureDetector(
            child: new RotationTransition(
                turns: curve,
                child: new FlutterLogo(
                  size: 200.0,
                )),
            onDoubleTap: () {
              if (controller.isCompleted) {
                controller.reverse();
              } else {
                controller.forward();
              }
            },
        ),
    ));
  }
}
复制代码

在这个例子中咱们想让一个FlutterLogo响应Double tap事件，可是FlutterLogo自己是不支持事件处理的Widget，因此这里将其包裹在GestureDetector内部，并经过GestureDetector的onDoubleTap参数来传递一个用于处理Double tap事件的方法。 由于这个例子是想FlutterLogo在接收到Double tap事件后去执行一个旋转动画，因此这里并非直接将FlutterLogo包裹在GestureDetector内部，而是先用描述一个旋转动画的组件RotationTransition包裹FlutterLogo，接着再在外层用GestureDetector包裹RotationTransition组件。关于在Flutter中实现动画的介绍能够参阅FFAD-Views。

小结： 在Flutter中使用GestureDetector能够监听处理大多数类型的事件，使用时只要将咱们想要接收事件的Widget包裹在GestureDetector内部，并传递事件处理方法给相应的参数便可。

英文原版传送