Flutter中Stack组件下被图片遮挡的按钮无法点击如何解决？

问题根源 #

你当前的代码结构里，外层Stack的第二个子组件（生成图片的Stack）位于按钮Stack的上层，完全覆盖了按钮所在区域，导致点击事件被图片层拦截，无法触达下方的按钮。

具体解决方法 #

方法1：调整堆叠顺序，让按钮层在上 #

调换外层Stack的两个子组件顺序，将图片层放在前面（下层），按钮层放在后面（上层），这样按钮就能接收点击：

Stack(
  children: [
    // 图片层（下层）
    SizedBox(
      height: 470.h,
      child: Stack(
        children: RandomShapeWidgetController.instance
            .generateRandomWidgets(6, 350.w, 440.h),
      ),
    ),
    // 按钮层（上层）
    Stack(
      children: [
        SizedBox(
          height: 470.h,
          child: Padding(
            padding: const EdgeInsets.all(5.0).w,
            child: Container(
              decoration: BoxDecoration(
                  border: Border.all(
                      width: 2.5.w, color: AppColors().borderSide),
                  borderRadius: BorderRadius.circular(10).r),
              child: Stack(
                children: _randomWidgets,
              ),
            ),
          ),
        ),
      ],
    ),
  ],
),

方法2：让图片层忽略点击事件 #

如果需要图片显示在按钮上方，但点击能穿透到按钮，可以给图片组件包裹IgnorePointer，让图片不拦截点击事件：
修改generateRandomWidgets方法中生成图片的逻辑：

Widget _buildRandomImage() {
  return IgnorePointer(
    ignoring: true,
    child: Image.asset('你的图片路径'),
  );
}

方法3：合并Stack，统一管理组件层级 #

把按钮和图片放在同一个Stack中，避免整层覆盖，同时灵活控制组件的前后顺序：

SizedBox(
  height: 470.h,
  child: Padding(
    padding: const EdgeInsets.all(5.0).w,
    child: Container(
      decoration: BoxDecoration(
          border: Border.all(
              width: 2.5.w, color: AppColors().borderSide),
          borderRadius: BorderRadius.circular(10).r),
      child: Stack(
        children: [
          // 先添加图片，放在下层
          ...RandomShapeWidgetController.instance
              .generateRandomWidgets(6, 350.w, 440.h),
          // 再添加按钮，放在上层
          ..._randomWidgets,
        ],
      ),
    ),
  ),
),

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