Flutter 学习之旅(三十三) 触摸事件学习(三) 手势冲突

在我们同时监听 GestureDetector 水平移动和垂直移动的时候,并在屏幕上斜向移动手指,那么到底会如何返回呢,其实水平和垂直不可能同时存在他们存在竞争关系,GestureDetector 会根据第一次触摸的水平方向和垂直方向的距离判断,哪个多则触发哪个回调,这也就是flutter 手势冲突,同时 点击和双击之间也存在竞争关系,看到这里大家也能理解了,竞争关系是相对的,并不是绝对得,如果两个手势并不存在冲突关系,则不会产生竞争

先来个例子

 GestureDetector(
          onVerticalDragUpdate: (event) {
            printString('onVerticalDragUpdate');
          },
          onVerticalDragEnd: (event) {
            printString('onVerticalDragEnd');
          },
          onHorizontalDragUpdate: (event) {
            printString('onHorizontalDragUpdate');
          },
          onHorizontalDragEnd: (event) {
            printString('onHorizontalDragEnd');
          },
          onPanDown: (event) {
            printString('onPanDown');
          },
          onTapUp: (event){
            printString('onTapUp');
          },
          child: Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.redAccent),
        ),

手指在屏幕上垂直滑动 打印结果

2020-09-14 09:49:59.995 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPanDown
2020-09-14 09:49:59.995 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerDown
2020-09-14 09:49:59.996 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.002 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.030 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.038 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.232 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.242 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.242 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onVerticalDragUpdate
2020-09-14 09:50:00.251 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.251 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onVerticalDragUpdate
2020-09-14 09:50:00.261 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.261 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onVerticalDragUpdate
2020-09-14 09:50:00.270 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onPointerMove
2020-09-14 09:50:00.270 871-1329/com.example.flutter_app1 I/flutter: tian.shm =onVerticalDragUpdate

并不存在水平移动的事件,其实冲突都是手势级别的,手势是针对原始指针封装而来的,所以想要解决冲突,一般都是使用Listener在外层包裹的,
例子

class TsmGestureConflictPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('手势冲突'),
        centerTitle: true,
      ),
      body: Listener(
        onPointerDown: (event){
          printString('onPointerDown');
        },
        onPointerMove: (event){
          printString('onPointerMove');
        } ,

        onPointerUp:(event){
          printString('onPointerUp');
        }  ,
        child: GestureDetector(
          onVerticalDragUpdate: (event) {
            printString('onVerticalDragUpdate');
          },
          onVerticalDragEnd: (event) {
            printString('onVerticalDragEnd');
          },
          onHorizontalDragUpdate: (event) {
            printString('onHorizontalDragUpdate');
          },
          onHorizontalDragEnd: (event) {
            printString('onHorizontalDragEnd');
          },
          onPanDown: (event) {
            printString('onPanDown');
          },
          onTapUp: (event){
            printString('onTapUp');
          },
          child: Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.redAccent),
        ),
      ),
    );
  }
}

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter