手势检测和触摸事件处理

手势检测和触摸事件处理

如何在Flutter中向 widget 添加手势识别器?

在 Xamarin.Forms 中，元素（Element）可能包含一个可供附加（attach）的单击事件。许多元素还包含一个与此事件关联的 命令。或者你可以使用 TapGestureRecognizer。在 Flutter 中有两种非常相似的方式：

  • 如果 widget 支持事件发现（detection），那么可以将函数传递给它并在函数中处理它：
@override
Widget build(BuildContext context) {
  return new RaisedButton(
      onPressed: () {
        print("click");
      },
      child: new Text("Button"));
}
  • If the widget doesn’t support event detection, wrap thewidget in a GestureDetector and pass a function to theonTap parameter.

如果 widget 不支持事件发现，则将 widget 封装在手势检测器（GestureDetector）中，并将函数传递给“onTap”参数。

<!-- skip -->
```dart
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”);
        },
      ),
    ));
  }
}


### 我如何处理 widget 上的其他手势？

在 Xamarin.Forms 中你可以在`VisualElement`中添加一个`手势识别器（GestureRecognizer）`。您通常只能使用 `TapGestureRecognizer`、`PinchGestureRecognizer` 和 `PanGestureRecognizer`，除非您构建了自己的实现。

在Flutter中，使用手势检测器，你可以监听到各种各样的手势，比如:

  * 单击

  * `onTapDown`
  * 当指尖在特定位置与屏幕接触产生点击事件。

  * `onTapUp`

  * 当指尖触发的点击事件已经停止在特定位置与屏幕接触。

  * `onTap`

  * 一个点击事件已经发生

  * `onTapCancel`

  * 触发了 `onTapDown` 事件之后的指尖没有导致点击事件。

  * 双击

  * `onDoubleTap`
  * 用户在同一位置连续快速点击屏幕两次。

  * 长按

  * `onLongPress`
  * 指尖长时间保持与屏幕在同一位置的接触。

  * 垂直拖动

  * `onVerticalDragStart`
  * 指尖与屏幕接触后，可能开始垂直移动。

  * `onVerticalDragUpdate`

  * 指尖与屏幕接触并在垂直方向上移动得更远。

  * `onVerticalDragEnd`

  * 指尖在之前与屏幕接触并垂直移动，当不再与屏幕接触时触发这个事件。当它停止与屏幕接触时，它会以特定的速度移动。

  * 水平拖动

  * `onHorizontalDragStart`
  * 指尖与屏幕接触，开始水平移动时触发。

  * `onHorizontalDragUpdate`

  * 指尖与屏幕接触并在水平方向上移动得更远。

  * `onHorizontalDragEnd`

  * 指尖在之前与屏幕接触并水平移动，当不再与屏幕接触时会触发这个事件。当它停止与屏幕接触时，它正在以特定的速度移动。

下面的例子展示了一个`手势检测器`，它可以在双击下旋转 Flutter 的 logo：

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(); } }, ), )); } } ```