Flutter GestureDetector手势拖动的onVerticalDragUpdate监听方法无法触发

磐石BedRock

已于 2023-05-18 22:03:18 修改

阅读量452

点赞数

文章标签： flutter android GestureDetector

于 2023-05-18 11:10:22 首次发布

本文链接：https://blog.csdn.net/qq_38774121/article/details/130742736

版权

Flutter 关于GestureDetector手势拖动的onVerticalDragUpdate监听方法无法触发的问题

问题
如果里面只有一个container会触发，但是如果里面包裹的是一个listview，就不会触发这个方法了

示例代码

Expanded(
   child: GestureDetector(
     onVerticalDragStart: (v) => print('onVerticalDragStart'),
     onVerticalDragDown: (v) => print('$v'),
     onVerticalDragUpdate: (v) => print('$v'),
     onVerticalDragCancel: () => print('onVerticalDragCancel'),
     onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
     child: Center(
         child: ListView.builder(
       itemBuilder: (context, index) {
         return SizedBox(height: 50.h, child: Text('$index'));
       },
       itemCount: 30,
     )),
   ),
 ),

 GestureDetector(
   onVerticalDragStart: (v) => print('onVerticalDragStart'),
   onVerticalDragDown: (v) => print('onVerticalDragDown'),
   onVerticalDragUpdate: (v) => print('onVerticalDragUpdate'),
   onVerticalDragCancel: () => print('onVerticalDragCancel'),
   onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
   child: Center(
     child: Container(
       width: 200,
       height: 200,
       color: Colors.red,
     ),
   ),
 )

问题原因

ListView在手势竞技场提前胜出，所以尽管GestureDetector可以监听到对应的PointerEvent，但是在其handleEvent中不会调用对应的callback了。因而使用Listener仍旧可以监听到对应的PointerEvent，可以自行决定如何响应事件。

解决方案代码

Listener(
  // 手指按下触发
  onPointerDown: (PointerDownEvent e) {
    print(e.localPosition.dy)
  },
  // 手指滑动时触发
  onPointerMove: (PointerMoveEvent e) {
    print(e.localPosition.dy)
  },
  child: Center(
     child: ListView.builder(
     itemBuilder: (context, index) {
       return SizedBox(height: 50.h, child: Text('$index'));
     },
     itemCount: 30,
   ))
),