如何实现同时支持onDeleted与点击触发额外操作的Chip组件

你的问题出在GestureDetector会拦截Chip内部的手势事件，包括删除按钮的点击，导致onDeleted无法触发。直接用Chip自带的onPressed属性就能替代外层的GestureDetector，实现点击Chip主体触发操作、点击删除按钮触发onDeleted的需求，两者互不干扰。

修改后的代码如下：

/// 可点击的Chip组件
Widget _tappableChip({
  /// Chip的文本标签
  required String label,

  /// 可选的角标
  int? badge,

  /// 点击Chip主体时执行的方法
  void Function()? onTap,

  /// 删除筛选条件时执行的方法
  void Function()? onDeleted,
}) {
  return Padding(
    padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
    child: Chip(
      onPressed: onTap, // 直接使用Chip自带的onPressed替代GestureDetector
      onDeleted: onDeleted,
      label: Text(label),
      avatar: badge == null ? null : Badge.count(count: badge),
    ),
  );
}

原理说明 #

Chip组件内部已经对删除按钮的手势做了单独处理，当你用GestureDetector包裹整个Chip时，外层的手势检测器会优先捕获所有点击事件，导致Chip的删除按钮无法接收到点击信号。而使用Chip原生的onPressed，组件会自动区分主体区域点击和删除按钮点击，分别触发对应的回调函数，完美解决冲突问题。

内容的提问来源于stack exchange，提问作者Stéphane de Luca