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('垂直事件胜出');
            // }),
          ),
        ),
        ],
      ),
    );
  }
}

你可能感兴趣的:(flutter学习笔记,flutter,学习,android)