如何让图片下方与Stack重叠的按钮可点击？

Question

我随机放置了一些我用堆栈创建的按钮和图像，图像使得很难找到按钮，但我无法单击按钮。我该如何解决这个问题。

带有数字的小部件是按钮，我无法单击图像下方的小部件。

我尝试在 Stack 中创建它并丢失它的属性。但还是无法点击

 Stack(
            children: [
              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,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 470.h,
                child: Stack(
                  children: RandomShapeWidgetController.instance
                      .generateRandomWidgets(6, 350.w, 440.h),
                ),
              ),
            ],
          ),

Answer 1

只需使用

IgnorePointer

将项目包裹在堆栈顶部即可。这将忽略对顶部项目的所有传入点击。

点击将移至底部项目

 Stack(
  children: [
    IgnorePointer(
      child: SizedBox(
        height: 470.h,
        child: Padding(
          padding: EdgeInsets.all(5).w,
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    width: 2.5.w, color: AppColors().borderSide,),
                borderRadius: BorderRadius.circular(10).r,),
            child: Stack(
              children: _randomWidgets,
            ),
          ),
        ),
      ),
    ),
    SizedBox(
      height: 470.h,
      child: Stack(
        children: RandomShapeWidgetController.instance
            .generateRandomWidgets(6, 350.w, 440.h),
      ),
    ),
  ],
)