Flutter学习笔记 --事件处理

Flutter有四种原始指针事件，如下：

事件类型	说明
onPointerDown	手指按下
onPointerMove	手指移动
onPointerUp	手指抬起
onPointerCancel	触摸事件取消

上面几个方法中都有一个event参数，参数类型分别是onPointerDownEvent、onPointerMoveEvent、onPointerUpEvent和onPointerCancelEvent，它们都是PointerEvent的子类，常用属性有以下几种：

• position:相对于全局坐标的偏移
• delta:两次指针移动事件的距离
• orientation:指针移动的方向，是一个角度值
• pressure:按压力度，如果没有压力传感器的话，该值始终为1

指针事件的拦截和忽略，Flutter提供了两个组件IgnorePointer和AbsorbPointer。两者的区别：

• IgnorePointer:此节点与其子节点都将忽略点击事件
• AbsorbPointer:此节点本身能够响应点击事件，并且会阻止事件传递到子节点上

除了原始指针事件以外，还有一些复杂的手势事件，如放大、缩小、双击等，处理这些复杂的手势事件，需要用到GestureDetector组件。GestureDetector组件的常用属性如下：

属性	说明
onTap	当用户与屏幕短暂触碰时触发
onTapDown	当用户按下屏幕时触发
onTapUp	当用户停止触碰屏幕时触发
onTapCancel	当用户触碰屏幕但没有完成Tap事件时触发
onVerticalDragDown	当用户触碰屏幕且准备往屏幕垂直方向移动时触发
onVerticalDragUpdate	当用户触碰屏幕且开始往屏幕垂直方向移动并且发生位移时触发
onVerticalDragCancel	当用户中断了onVerticalDragDown时触发
onVerticalDragStart	当用户触碰屏幕且开始往屏幕垂直方向移动时触发
onVerticalDragEnd	当用户完成垂直方向触摸屏幕时触发
onHorizontalDragDown	当用户触碰屏幕且准备往屏幕水平方向移动时触发
onHorizontalDragUpdate	当用户触碰屏幕且开始往屏幕水平方向移动并且发生位移时触发
onHorizontalDragCancel	当用户中断了onHorizontalDragDown时触发
onHorizontalDragStart	当用户触碰屏幕且开始往屏幕水平方向移动时触发
onHorizontalDragEnd	当用户完成水平方向触摸屏幕时触发
onPanDown	当用户触碰屏幕时触发
onPanUpdate	当用户触碰屏幕并产生移动时触发
onPanEnd	当用户完成触碰屏幕时触发
onPanStart	当用户触碰屏幕并开始移动时触发
onScaleStart	当用户触碰屏幕并开始缩放时触发
onScaleUpdate	当用户触碰屏幕并产生缩放时触发
onScaleEnd	当用户完成缩放时触发
onDoubleTap	当用户快速双击屏幕时触发
onLongPress	当用户长按屏幕时触发

示例代码：

class _GestureDetectorPageState extends State {
  double _left = 0.0;
  double _top=0.0;
  int index = 0;
  double _scaleSize = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children:[
        Positioned(
          left: _left,
          top: _top,
          child: GestureDetector(
            child: OutlinedButton(
              onPressed: () {  },
              child: Text('huhuhu'),
            ),
            // child: Column(
            //   children: [
            //     Container(
            //       width: 200,
            //       height: 200,
            //       color: index % 2 == 0 ? Colors.green : Colors.blue,
            //       child: Text('$_scaleSize'),
            //     ),
            //     FlutterLogo(
            //       size: _scaleSize,
            //     )
            //   ],
            // ),
            onPanUpdate: (e)=>{
              setState(() {
                _left += e.delta.dx;
                _top += e.delta.dy;
              })
            },
            // onTap: ()=>print('onTap'),
            // onTapDown: (e)=>print('onTapDown:$e'),
            // onTapUp: (e)=>print('onTapUp:$e'),
            // onScaleUpdate: (e)=>setState(() {
            //   if(e.scale.clamp(0.5, 10) != 1) {
            //     _scaleSize = 100 * e.scale.clamp(0.5, 10);
            //   }
            // }),
            // onHorizontalDragCancel: ()=>print('onHorizontalDragCancel'),
            // onHorizontalDragDown: (e)=>print('onHorizontalDragDown'),
            // onHorizontalDragEnd: (e)=>print('onHorizontalDragEnd'),
            // onHorizontalDragUpdate: (e)=>setState(() {
            //   // _left += e.delta.dx;
            //   index = 4;
            //   print('水平事件胜出');
            // }),
            // onVerticalDragDown: (e)=>print('onVerticalDragDown'),
            // onVerticalDragCancel: ()=>print('onVerticalDragCancel'),
            // onVerticalDragStart: (e)=>print('onVerticalDragStart'),
            // onVerticalDragUpdate: (e)=>setState(() {
            //   index = 5;
            //   // _top += e.delta.dy;
            //   print('垂直事件胜出');
            // }),
          ),
        ),
        ],
      ),
    );
  }
}