如何检测用户手势及处理点击事件

1、添加手势识别的代码

2、

按下-->松开   会产生一个点击事件

3、

长按时，会产生一个   按下-->取消-->长按的事件

就是说长按的化会有一个取消的事件告诉我们

4、

取消事件：当按住控件，然后划出控件的范围时，会产生取消的事件，但是没有‘松开’和‘点击’的回调，这就代表了‘取消’的事件

 

5、画小球

 

按住小球进行拖动

 

 

此时小球就可以跟着手指的移动而进行移动了

6、

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';

void main() => runApp(GesturePage());


//StatefulWidget与基础组件
class GesturePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState()  => GesturePageState();
}

class GesturePageState extends State<GesturePage>{
  String printString='';
  double moveX=0,moveY=0;//小球移动的位置
  Future<Null> _handleRefresh()async{
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

  _item(String title,Color color){
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)),
    );
  }
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);

    return MaterialApp(
      title: '如何检测用户手势以及处理点击事件？',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('如何检测用户手势以及处理点击事件？'),
          leading:GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          ) ),
        body:FractionallySizedBox(
          widthFactor: 1,
          child: Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  GestureDetector(
                    onTap: ()=>_printMsg('点击'),
                    onDoubleTap: ()=>_printMsg('双击'),
                    onLongPress: ()=>_printMsg('长按'),
                    onTapCancel: ()=>_printMsg('点击取消'),
                    onTapUp: (e)=>_printMsg('松开'),
                    onTapDown: (e)=>_printMsg('按下'),
                    child: Container(
                      padding: EdgeInsets.all(60),
                      decoration: BoxDecoration(color:Colors.blueAccent),
                      child: Text('点我',style: TextStyle(fontSize: 36,color:Colors.white)),
                    ),
                  ),
                  Text(printString)
                ],
              ),
              Positioned(
                //跟着手指滑动的小球
                left: moveX,
                top: moveY,
                child: GestureDetector(
                  //手指滑动过程中，该方法会被回调
                  onPanUpdate: (e)=>_doMove(e),
                  child: Container(
                    width: 72,
                    height: 72,
                    decoration: BoxDecoration(
                      color: Colors.amber,
                      //直径是72，半径是36，这样就可以画出一个球形
                      borderRadius: BorderRadius.circular(36),
                    )
                  )
                )
              )
            ],
          ),
        )
      ),
    );


  }

  _printMsg(String msg) {
    setState(() {
      printString+=' ,$msg';
    });
  }

  _doMove(DragUpdateDetails e) {
    setState(() {
      moveX+=e.delta.dx;
      moveY+=e.delta.dy;
    });
    print(e);
  }

}