Flutter for android developers — gesture detection [译]

March 4, 2018

[译]Flutter for Android Developers - Gesture Detection

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内部，并传递事件处理方法给相应的参数即可。

Flutter for android developers — gesture detection [译]

[译]Flutter for Android Developers - Gesture Detection

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

在Flutter中怎样处理其他事件