因為筆者本身主要從事是Android開發(fā)赤兴，所以很多角度都是作為一個Android開發(fā)者學習Flutter的角度出發(fā)埋酬，IOS或者H5的開發(fā)同學可以選擇性閱讀

目錄

前言

在Android中扯键，每一個View都可以通過onTouch方法重寫其觸摸事件撩满，也可以通過setOnClickListener方法來給View設置點擊事件葵第。但是Flutter中除了少部分組件圣拄，如Button相關的組件可以直接通過onPressed實現(xiàn)點擊事件嘴秸。其余組件想實現(xiàn)點擊、長按等事件，都需要借助GestureDetector來實現(xiàn)手勢監(jiān)聽

常用的幾個手勢

下面介紹比較常用的手勢如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,
  ),
)

拖動手勢

小球跟隨手指移動的實現(xiàn)應該是屬于各種移動端框架作為了解拖動手勢的的典型案例，下面我們來看看用flutter如何實現(xiàn)小球跟隨手指移動

拖動手勢主要由onPanDown（手指按下）串述、onPanUpdate（手指滑動）执解、onPanEnd（滑動結(jié)束）構(gòu)成

Stack(
  children: <Widget>[
    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) {
          //打印滑動結(jié)束時在x、y軸上的速度
          print(e.velocity);
        },

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

縮放手勢

縮放手勢需要用到onScaleUpdate方法纲酗，下面是一個簡單的圖片縮放的實現(xiàn)

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(() {
        //縮放倍數(shù)在0.8到10倍之間
        width = 200 * e.scale.clamp(0.8, 10);
      });
    },
  ),
)