Flutter 学习（十八）手势识别 Widget

Flutter 通过 Widget 来处理手势事件

在前面讲按钮的时候，你会发现按钮有 onPressed 来响应点击事件，但是如果我让你去监听 Text 的点击事件，你会发现 Text 根本没有类似按钮的 onPressed 属性，那么如何去监听一个 Text 的点击事件呢？

那就需要使用专门处理手势事件的 Widget 来嵌套 Text，在 Flutter 中，手势事件识别也是通过 Widget 来实现的，通过这个，你也能更加明白 Everything is a Widget。

Flutter 手势事件的分类

手势事件在 Flutter 中分为两层：

1. 第一层是原始的 pointer events(指针事件)
   它描述了屏幕上指针（例如，触摸，鼠标和触控笔）的位置和移动。例如：PointerDownEvent、PointerUpEvent 、PointerMoveEvent 、PointerCancelEvent 等。
   为了监听 pointer events，请使用 Listener Widget，但一般建议使用 GestureDetector Widget，就是下面要介绍的。
   
2. 第二层是可以对原始的事件识别成不同的手势
   第二层是对第一层原始 pointer event 事件进行识别后的手势，例如：单击、双击、长按、拖动等。
   为了识别不同的手势，请使用 GestureDetector Widget。
   

下来介绍 GestureDetector 的使用。

Flutter 手势识别的 Widget —— GestureDetector

GestureDetector 是用于检测手势的 Widget。

GestureDetector 快速上手

GestureDetector 的使用很简单，只要用 GestureDetector 嵌套要检测手势的 Widget 就行，然后在 GestureDetector 里实现想要监听的手势的方法就行。

例如，想要检测 Text 的点击事件，就可以这么用：

GestureDetector(
    child: Text('Hello Flutter'),
    onTap: (){
        print('tab Text');
    },
)

GestureDetector 在一个页面使用的完整 Demo 为：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(GestureDetectorWidget());
class GestureDetectorWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter 手势识别Widget")),
        body: GestureDetector(
          child: Text('手势识别'),
          onTap: (){
            print('点击');
          },
          onDoubleTap: (){
            print('双击');
          },
          onLongPress:  (){
            print('长按');
          },
          onHorizontalDragStart: (DragStartDetails details){
            print('水平滑动');
          },
        ),
      ),
    );
  }
}

GestureDetector 的构造函数及参数说明

为了知道 GestureDetector 支持哪些手势，我们可以看一下 GestureDetector 的构造函数：

class GestureDetector extends StatelessWidget {
  GestureDetector({
    Key key,
    this.child,
    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onDoubleTap,
    this.onLongPress,
    this.onLongPressUp,
    this.onLongPressDragStart,
    this.onLongPressDragUpdate,
    this.onLongPressDragUp,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,
    this.behavior,
    this.excludeFromSemantics = false,
    this.dragStartBehavior = DragStartBehavior.down,
  })
  ...
}

通过看 GestureDetector 构造函数的参数，就可以知道 GestureDetector 支持哪些手势。

参考

【1】Flutter 实战
【2】Flutter 中文文档
【3】Flutter 完全手册