Flutter（五）手势GestureDetector

因为笔者本身主要从事是Android开发，所以很多角度都是作为一个Android开发者学习Flutter的角度出发，IOS或者H5的开发同学可以选择性阅读

目录

前言

在Android中，每一个View都可以通过onTouch方法重写其触摸事件，也可以通过setOnClickListener方法来给View设置点击事件。但是Flutter中除了少部分组件，如Button相关的组件可以直接通过onPressed实现点击事件。其余组件想实现点击、长按等事件，都需要借助GestureDetector来实现手势监听

常用的几个手势

下面介绍比较常用的手势如onTap（点击）、onDoubleTap（双击）、onLongPress（长按）

GestureDetector(
  onTap: () => _printMsg("点击"),
  onDoubleTap: () => _printMsg("双击"),
  onLongPress: () => _printMsg("长按"),
  onTapCancel: () => _printMsg("取消"),
  onTapUp: (e) => _printMsg("松开"),
  onTapDown: (e) => _printMsg("按下"),
  child: Container(
    decoration: BoxDecoration(color: Colors.redAccent),
    width: 100,
    height: 100,
  ),
)

拖动手势

小球跟随手指移动的实现应该是属于各种移动端框架作为了解拖动手势的的典型案例，下面我们来看看用flutter如何实现小球跟随手指移动

拖动手势主要由onPanDown（手指按下）、onPanUpdate（手指滑动）、onPanEnd（滑动结束）构成

Stack(
  children: [
    Positioned(
      top: top,
      left: left,
      child: GestureDetector(
        onPanDown: (DragDownDetails e) {
          //打印手指按下的位置
          print("手指按下：${e.globalPosition}");
        },
        //手指滑动
        onPanUpdate: (DragUpdateDetails e) {
          setState(() {
            left += e.delta.dx;
            top += e.delta.dy;
          });
        },
        onPanEnd: (DragEndDetails e) {
          //打印滑动结束时在x、y轴上的速度
          print(e.velocity);
        },

        child: Container(
          width: 72,
          height: 72,
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(36)
          ),
        ),
      ),
    )
  ],
)

缩放手势

缩放手势需要用到onScaleUpdate方法，下面是一个简单的图片缩放的实现

Center(
  child: GestureDetector(
    child: Container(
      //使用OverflowBox可以让子组件宽高超过父组件
      child: OverflowBox(
        maxWidth: 2000.0,
        child: Image.network(
            "https://upload-images.jianshu.io/upload_images/10992781-a64bd14d27699266.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp",
            width: width),
      ),
    ),
    onScaleUpdate: (ScaleUpdateDetails e) {
      setState(() {
        //缩放倍数在0.8到10倍之间
        width = 200 * e.scale.clamp(0.8, 10);
      });
    },
  ),
)