Flutter：Dismissible组件中onHorizontalDragUpdate未触发问题

问题根源在于：Dismissible组件内部已经内置了水平拖拽的手势处理逻辑，它会直接拦截并消费水平拖拽事件，所以外层嵌套的GestureDetector根本拿不到onHorizontalDragStart和onHorizontalDragUpdate事件。

不用外层GestureDetector，直接利用Dismissible自带的onUpdate回调就能实现你要的效果——通过滑动进度控制删除图标的位置。

修改后的代码示例 #

// 定义状态变量记录滑动偏移量
double _dragOffsetX = 0;

// 替换原有的GestureDetector+Dismissible结构
Dismissible(
  key: UniqueKey(),
  direction: DismissDirection.endToStart,
  // 核心：通过onUpdate获取滑动实时数据
  onUpdate: (DragUpdateDetails details) {
    setState(() {
      // 拿到当前滑动的水平偏移量，负数表示从右往左滑
      _dragOffsetX = details.dragOffset.dx;
    });
  },
  onDismissed: (direction) {},
  secondaryBackground: AnimatedContainer(
    duration: const Duration(milliseconds: 100),
    // 根据滑动偏移量计算图标位置，可按需调整数值适配布局
    transform: Matrix4.translationValues(_dragOffsetX + 40, 0.0, 0.0),
    color: Colors.red,
    padding: const EdgeInsets.only(left: 20),
    child: const Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Icon(
          Icons.delete,
          color: Colors.white,
          size: 36,
        ),
      ],
    ),
  ),
  background: Container(
    color: Colors.grey,
  ),
  confirmDismiss: (direction) async {
    // 保留原有确认逻辑
    final result = await Future.delayed(const Duration(seconds: 6), () {
      return false;
    });
    return result;
  },
  child: widget.child,
)

关键修改说明 #

1. 移除外层GestureDetector：完全不需要它，Dismissible自身就能提供滑动的实时数据
2. 利用onUpdate回调：滑动过程中该回调会持续触发，DragUpdateDetails里的dragOffset.dx就是当前滑动的水平偏移量（从右往左滑时为负数）
3. 调整图标位置计算：根据布局需求微调transform中的数值，确保图标跟随滑动节奏自然移动

这样修改后，滑动时删除图标就会同步左右移动，同时解决了手势事件被拦截的问题。

内容的提问来源于stack exchange，提问作者Cyrus the Great