Flutter GestureDetector长按滑动问题：长按录音时滑动需删除录音

Flutter 的 GestureDetector 里，长按手势（LongPress）一旦被识别，会直接抢占手势事件的控制权，导致拖拽（Pan）事件完全触发不了——因为默认手势识别器有优先级，长按比拖拽优先级高，所以你的 onPanUpdate 根本不会被调用。

下面给两种可行的实现方式，直接能用：

方式一：用 RawGestureDetector 组合手势识别器 #

这种方式能自定义手势间的交互逻辑，避免默认的优先级冲突：

class RecordButton extends StatefulWidget {
  const RecordButton({super.key});

  @override
  State<RecordButton> createState() => _RecordButtonState();
}

class _RecordButtonState extends State<RecordButton> {
  bool isRecording = false;
  bool isSwipingToCancel = false;

  final _longPress = LongPressGestureRecognizer();
  final _pan = PanGestureRecognizer();

  @override
  void initState() {
    super.initState();
    // 配置长按逻辑
    _longPress.onLongPressStart = (_) {
      setState(() {
        isRecording = true;
        isSwipingToCancel = false;
      });
      // 这里启动你的录音代码
    };
    _longPress.onLongPressEnd = (_) {
      if (isSwipingToCancel) {
        // 左滑取消，执行删除录音操作
        debugPrint("删除录音");
      } else {
        // 正常结束，执行保存录音操作
        debugPrint("保存录音");
      }
      setState(() => isRecording = false);
    };

    // 配置拖拽逻辑
    _pan.onUpdate = (details) {
      if (isRecording) {
        // 设定滑动阈值（避免误触），左滑超过10像素则标记为取消
        if (details.delta.dx < -10) {
          setState(() => isSwipingToCancel = true);
        } else if (details.delta.dx > 10) {
          // 滑回去取消标记
          setState(() => isSwipingToCancel = false);
        }
      }
    };
  }

  @override
  void dispose() {
    _longPress.dispose();
    _pan.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        LongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers(
          () => _longPress,
          (_) {},
        ),
        PanGestureRecognizer: GestureRecognizerFactoryWithHandlers(
          () => _pan,
          (instance) {
            // 让拖拽识别器不独占事件，保证长按和拖拽能同时触发
            instance.gestureSettings = const GestureSettings(velocityThreshold: 0.0);
          },
        ),
      },
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Icon(
          isRecording 
              ? isSwipingToCancel ? Icons.delete_outline : Icons.mic 
              : Icons.mic_none_outlined,
          size: 40,
          color: isSwipingToCancel ? Colors.red : Theme.of(context).primaryColor,
        ),
      ),
    );
  }
}

方式二：用 Listener 监听触摸移动（更简单） #

如果不需要复杂的手势判断，直接用 Listener 监听触摸移动，绕开手势识别器的优先级问题：

class RecordButton extends StatefulWidget {
  const RecordButton({super.key});

  @override
  State<RecordButton> createState() => _RecordButtonState();
}

class _RecordButtonState extends State<RecordButton> {
  bool isRecording = false;
  bool isSwipingToCancel = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Listener(
        onPointerMove: (event) {
          if (isRecording) {
            // 左滑超过10像素标记为取消
            if (event.delta.dx < -10) {
              setState(() => isSwipingToCancel = true);
            } else if (event.delta.dx > 10) {
              setState(() => isSwipingToCancel = false);
            }
          }
        },
        child: const Icon(Icons.mic_none_outlined, size: 40),
      ),
      onLongPressStart: (_) {
        setState(() {
          isRecording = true;
          isSwipingToCancel = false;
        });
        // 启动录音
      },
      onLongPressEnd: (_) {
        if (isSwipingToCancel) {
          debugPrint("删除录音");
        } else {
          debugPrint("保存录音");
        }
        setState(() => isRecording = false);
      },
    );
  }
}

• 两种方式都能实现「长按录音+左滑删除」的逻辑，按需选择：
  • 第一种适合需要更复杂手势交互的场景；
  • 第二种代码更简洁，适合简单需求。
• 滑动阈值（比如10像素）可以根据实际需求调整，避免轻微误触触发取消。

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