Flutter中Draggable嵌套GestureDetector后无响应的解决方法

问题根源在于Draggable内部的PanGestureRecognizer会与GestureDetector依赖的ScaleGestureRecognizer竞争触摸事件，默认情况下PanGestureRecognizer优先级更高，会提前拦截手势，导致嵌套在Draggable内的GestureDetector无法响应缩放/旋转事件。

解决方案：使用RawGestureDetector自定义手势优先级 #

通过RawGestureDetector直接管理手势识别器，让ScaleGestureRecognizer在检测到多指缩放/旋转时优先获取事件控制权，同时保留Draggable的单指拖拽功能：

import 'dart:developer';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class A2 extends StatefulWidget {
  const A2({Key? key}) : super(key: key);
  @override
  State<A2> createState() => _A2State();
}

class _A2State extends State<A2> {
  final ScaleGestureRecognizer _scaleRecognizer = ScaleGestureRecognizer();

  @override
  void initState() {
    super.initState();
    // 绑定缩放/旋转回调
    _scaleRecognizer.onUpdate = (ScaleUpdateDetails detail) {
      log('scale is ${detail.scale}');
      log('rotation is ${detail.rotation}');
    };
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Draggable(
          feedback: Container(
            color: Colors.red.withOpacity(0.5),
            height: 200,
            width: 200,
          ),
          child: RawGestureDetector(
            gestures: {
              ScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<ScaleGestureRecognizer>(
                () => _scaleRecognizer,
                (_) {},
              ),
            },
            behavior: HitTestBehavior.opaque,
            child: Container(
              color: Colors.red,
              height: 200,
              width: 200,
            ),
          ),
        ),
      ),
    );
  }
}

说明 #

• 单指操作时，Draggable的PanGestureRecognizer会正常响应拖拽事件；
• 多指操作时，ScaleGestureRecognizer会接管事件，触发缩放/旋转的日志输出；
• 使用RawGestureDetector可以精准控制手势识别器的行为，避免默认的手势竞争冲突。

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