Flutter中Stack组件内OnTap事件失效问题求助

问题根源 #

你的问题由两个核心原因导致：

• Stack子组件层级顺序错误：最后一个子组件Image.asset("assets/home_bottom_logo.png")未使用Positioned，会默认占满整个Stack空间，且因在子组件列表末尾，层级最高，直接遮挡了上层两个Positioned组件的点击区域。
• 多余的IgnorePointer组件：第一个InkWell的子组件套了IgnorePointer，这会直接阻止InkWell接收点击事件，属于无效且有害的设置。

解决方案 #

1. 调整Stack子组件顺序，将背景图片放在最前面（Stack子组件越靠后层级越高），避免遮挡上层可点击组件。
2. 移除第一个InkWell内的IgnorePointer组件，直接将图片作为InkWell的子节点。
3. 移除Stack内无用的CustomStyle.h20，避免干扰布局层级。

修改后的Stack代码片段 #

Stack(
  children: [
    // 背景图片放在最底层，不遮挡上层可点击组件
    Image.asset("assets/home_bottom_logo.png", fit: BoxFit.cover),
    Positioned(
      left: 13,
      child: InkWell(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ScopriCannara()),
        ),
        // 移除多余的IgnorePointer，直接使用Image作为点击触发节点
        child: Image.asset(
          "assets/icons/scopri_icon.png",
          width: iconSize! - 20,
          height: iconSize! - 20,
        ),
      ),
    ),
    Positioned(
      left: 10,
      top: 60,
      child: GestureDetector(
        onTap: () => print("test"),
        child: Container(
          color: Colors.pink,
          child: Image.asset(
            "assets/icons/info_icon.png",
            width: iconSize! - 20,
            height: iconSize! - 20,
          ),
        ),
      ),
    ),
  ],
)

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