Flutter嵌套InkWell仅单个生效，如何实现各自独立onTap？

场景1：点击子组件时同时触发父、子的onTap #

默认情况下，子级InkWell会拦截点击事件，导致父级的onTap无法触发。只需给子InkWell添加behavior: HitTestBehavior.translucent配置，允许事件穿透到父组件：

InkWell(
  onTap: () => print("1st inkwell"),
  child: InkWell(
    behavior: HitTestBehavior.translucent, // 关键配置
    onTap: () => print("2nd inkwell"),
    child: Icon(Icons.close),
  ),
)

点击Icon时，会依次触发子级和父级的onTap，控制台先后输出2nd inkwell和1st inkwell。

场景2：区分点击区域，父、子各自触发对应逻辑 #

如果需要点击父组件的空白区域触发父级onTap，点击子组件触发子级onTap，需要调整布局结构，让父InkWell的子元素包含足够的可点击区域（比如用Container设置宽高）：

InkWell(
  onTap: () => print("1st inkwell"),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.grey.shade200,
    child: Center(
      child: InkWell(
        onTap: () => print("2nd inkwell"),
        child: Icon(Icons.close, size: 40),
      ),
    ),
  ),
)

此时点击灰色的父容器区域，会输出1st inkwell；点击中间的Icon，会输出2nd inkwell。

关于HitTestBehavior的说明 #

HitTestBehavior控制组件的事件处理优先级，常用取值：

• deferToChild：默认行为，子组件优先处理事件，父组件不会接收
• opaque：组件视为不透明，拦截所有点击事件，子组件无法触发
• translucent：组件视为半透明，允许事件穿透到父组件，父、子都会处理点击

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