Flutter：如何让子组件手势检测优先于父级PageView滚动手势？

问题分析 #

PageView的横向拖拽手势识别器优先级高于子组件的Pan手势识别器，导致子组件的横向拖拽手势被PageView拦截，无法触发。

有效解决方案 #

方案1：使用RawGestureDetector抢占手势竞技场 #

通过自定义Pan手势识别器，在手势开始时主动赢下手势竞技场，让子组件优先响应拖拽事件。

修改后的完整代码：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double containerWidth = 100;
  late PanGestureRecognizer _panRecognizer;

  @override
  void initState() {
    super.initState();
    _panRecognizer = PanGestureRecognizer()
      ..onUpdate = (details) {
        setState(() {
          containerWidth += details.delta.dx;
        });
      }
      ..onStart = (details) {
        // 主动赢下手势竞技场，阻止PageView拦截手势
        GestureBinding.instance.gestureArenaManager.sweep(_panRecognizer);
      };
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("test")),
      body: Center(
        child: PageView(
          physics: const BouncingScrollPhysics(),
          children: [
            Container(height: 500, width: 600, color: Colors.green),
            Container(
              height: 500,
              width: 600,
              color: Colors.blue,
              child: Center(
                child: RawGestureDetector(
                  gestures: {
                    PanGestureRecognizer:
                        GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>(
                      () => _panRecognizer,
                      (instance) {},
                    ),
                  },
                  child: Container(
                    width: containerWidth,
                    height: 50,
                    color: Colors.black54,
                  ),
                ),
              ),
            ),
            Container(height: 500, width: 600, color: Colors.red),
          ],
        ),
      ),
    );
  }
}

效果：在黑色容器上拖拽时，触发宽度调整；在蓝色区域其他位置拖拽时，PageView正常切换页面。

方案2：使用Listener监听原始触摸事件 #

Listener直接监听底层触摸事件，不参与手势竞技场竞争，可绕过PageView的手势拦截。

修改后的核心代码片段：

child: Center(
  child: Listener(
    onPointerMove: (details) {
      setState(() {
        containerWidth += details.delta.dx;
      });
    },
    child: Container(
      width: containerWidth,
      height: 50,
      color: Colors.black54,
    ),
  ),
),

优缺点：代码更简洁，但仅提供基础触摸事件回调，没有手势识别器的封装功能（如拖拽速度计算、结束回调），适合简单场景。

内容的提问来源于stack exchange，提问作者Baudouin Arbarétier