Flutter 小技巧——手势处理

Flutter手势处理

在Flutter中的手势事件分为两层。
第一层有原始指针事件，它描述了屏幕上指针（例如，触摸，鼠标和触控笔）的位置和移动。
第二层有手势，描述由一个或多个指针移动组成的语义动作。
在flutter中简单的手势处理用封装好的GestureDetector来处理就好了。

---

GestureDetector中为我们提供的方法有：

onTapDown：按下
onTap：点击动作
onTapUp：抬起
onTapCancel：触发了 onTapDown，但并没有完成一个 onTap 动作
onDoubleTap：双击
onLongPress：长按
onScaleStart, onScaleUpdate, onScaleEnd：缩放

onVerticalDragDown, onVerticalDragStart, onVerticalDragUpdate, onVerticalDragEnd, onVerticalDragCancel, onVerticalDragUpdate：在竖直方向上移动

onHorizontalDragDown, onHorizontalDragStart, onHorizontalDragUpdate, onHorizontalDragEnd, onHorizontalDragCancel, onHorizontalDragUpdate：在水平方向上移动

onPanDown, onPanStart, onPanUpdate, onPanEnd, onPanCancel：拖曳（触碰到屏幕、在屏幕上移动）

---

以onTap、onDoubleTap、onLongPress为例rt:

image

附上代码：

//注意，这里的 Fluttertoast 需要导包
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GestureDetector(
        onTap: (){
          Fluttertoast.showToast(msg: "你点击了一次",
              toastLength: Toast.LENGTH_SHORT);
        },
        onDoubleTap: (){
          Fluttertoast.showToast(msg: "你双击了一次",
              toastLength: Toast.LENGTH_SHORT);
        },
        onLongPress: (){
          Fluttertoast.showToast(msg: "你长按了一次",
              toastLength: Toast.LENGTH_SHORT);
        },
         child: Container(
           child: Image.asset("images/nyy.png"),
         ),
        ),
      );
  }

导包：

dev_dependencies:
  fluttertoast: ^3.1.1

大功告成！其他的方法读者可自行尝试。

传送门：https://cloud.tencent.com/developer/article/1470366