ListView内GestureDetector垂直拖动无法触发onPanUpdate的解决问询

这个问题我之前也碰到过！核心原因就是Flutter的**手势竞技场（GestureArenaManager）**在起作用：ListView自带的VerticalDragGestureRecognizer会和你GestureDetector里的PanGestureRecognizer竞争垂直方向的触摸事件，默认情况下ListView的滚动识别器优先级更高，会先赢得竞技场的竞争，导致你的onPanUpdate收不到垂直拖动的事件。

下面给你几个可行的解决方案，按需选择：

方案一：给Pan手势识别器设置更高优先级 #

直接在GestureDetector中指定自定义的PanGestureRecognizer，并把它的优先级设为high，让它在手势竞争中胜出。

class DragState extends State<Drag> {
  double x = 0, y = 0;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: x,
      top: y,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        dragStartBehavior: DragStartBehavior.down,
        // 指定自定义的手势识别器，设置更高优先级
        gestureRecognizers: {
          PanGestureRecognizer: GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>(
            () => PanGestureRecognizer(),
            (recognizer) {
              recognizer.priority = GesturePriority.high;
            },
          ),
        },
        onPanUpdate: (details) {
          setState(() {
            x += details.delta.dx;
            y += details.delta.dy;
          });
        },
        child: Container(
          width: 100,
          height: 100,
          color: Colors.lightBlue,
          child: Icon(
            Icons.games,
            color: Colors.white,
            size: 30,
          ),
        ),
      ),
    );
  }
}

方案二：使用RawGestureDetector自定义手势处理 #

如果你需要更精细的手势控制，可以用RawGestureDetector直接管理手势识别器，同样通过设置优先级让它赢过ListView的滚动识别器：

class DragState extends State<Drag> {
  double x = 0, y = 0;
  late final PanGestureRecognizer _panRecognizer;

  @override
  void initState() {
    super.initState();
    _panRecognizer = PanGestureRecognizer()
      ..onUpdate = (details) {
        setState(() {
          x += details.delta.dx;
          y += details.delta.dy;
        });
      };
  }

  @override
  void dispose() {
    _panRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: x,
      top: y,
      child: RawGestureDetector(
        behavior: HitTestBehavior.opaque,
        gestures: {
          PanGestureRecognizer: GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>(
            () => _panRecognizer,
            (instance) {
              instance
                ..dragStartBehavior = DragStartBehavior.down
                ..priority = GesturePriority.high;
            },
          ),
        },
        child: Container(
          width: 100,
          height: 100,
          color: Colors.lightBlue,
          child: Icon(
            Icons.games,
            color: Colors.white,
            size: 30,
          ),
        ),
      ),
    );
  }
}

方案三：拖动时临时禁用ListView滚动 #

如果希望只有在拖动蓝色容器时禁止ListView滚动，其他时候保持正常滚动体验，可以通过父组件维护状态来控制ListView的滚动物理效果：

第一步：修改DemoWidget为Stateful组件 #

class DemoWidget extends StatefulWidget {
  @override
  _DemoWidgetState createState() => _DemoWidgetState();
}

class _DemoWidgetState extends State<DemoWidget> {
  bool _isDragging = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GestureDetector in ListView')),
      body: ListView(
        // 根据拖动状态切换滚动物理效果
        physics: _isDragging ? NeverScrollableScrollPhysics() : AlwaysScrollableScrollPhysics(),
        children: <Widget>[
          Card(
            child: Container(
              height: 500,
              child: Stack(
                children: <Widget>[
                  Drag(
                    onDragStart: () => setState(() => _isDragging = true),
                    onDragEnd: () => setState(() => _isDragging = false),
                  ),
                ],
              ),
            ),
          ),
          Card(
            child: Container(
              height: 1000,
            ),
          ),
        ],
      ),
    );
  }
}

第二步：更新Drag组件传递拖动状态 #

class Drag extends StatefulWidget {
  final VoidCallback? onDragStart;
  final VoidCallback? onDragEnd;

  const Drag({Key? key, this.onDragStart, this.onDragEnd}) : super(key: key);

  @override
  DragState createState() => DragState();
}

class DragState extends State<Drag> {
  double x = 0, y = 0;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: x,
      top: y,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        dragStartBehavior: DragStartBehavior.down,
        onPanStart: (_) => widget.onDragStart?.call(),
        onPanEnd: (_) => widget.onDragEnd?.call(),
        onPanUpdate: (details) {
          setState(() {
            x += details.delta.dx;
            y += details.delta.dy;
          });
        },
        child: Container(
          width: 100,
          height: 100,
          color: Colors.lightBlue,
          child: Icon(
            Icons.games,
            color: Colors.white,
            size: 30,
          ),
        ),
      ),
    );
  }
}

方案选择建议 #

• 如果只需要让你的组件优先响应拖动事件，方案一或二最直接，代码改动小；
• 如果希望拖动组件时完全避免ListView滚动的干扰，方案三的体验更连贯，适合需要精准拖动的场景。

内容的提问来源于stack exchange，提问作者lockgz