如何在Flutter Stack组件中实现带触摸事件的Box Shadow效果？

问题原因 #

你添加的右上角渐变阴影Container位于图片层上方，即便它是透明渐变效果，默认也会拦截点击事件，导致下方图片的onTap无法触发。

解决方案 #

给阴影Container添加IgnorePointer组件，让它不响应点击事件，同时保留视觉效果；另外给按钮补充点击事件逻辑，确保所有交互正常运行：

修改后的代码 #

ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(15),
    topRight: Radius.circular(15),
  ),
  child: SizedBox(
    height: 200,
    child: Stack(
      children: [
        PageView.builder(
          itemCount: fc.restaurants[i].images.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                // 这里填写图片点击的业务逻辑
              },
              child: Container(
                decoration: BoxDecoration(
                  color: Theme.of(context).cardColor,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[Get.isDarkMode ? 800 : 200]!,
                      spreadRadius: 1,
                      blurRadius: 5,
                    )
                  ],
                ),
                child: CustomImage(
                  fit: BoxFit.cover,
                  placeholder: 'assets/image/placeholder.png',
                  image: fc.restaurants[i].images[index],
                ),
              ),
            );
          },
        ),
        // 阴影层：用IgnorePointer让点击事件穿透到图片
        Positioned(
          top: 0,
          right: 0,
          child: IgnorePointer(
            child: Transform(
              transform: Matrix4.rotationZ(0.5)
                ..scale(1.8)
                ..translate(33.0, -10.0),
              alignment: Alignment.topRight,
              child: Container(
                height: 40,
                width: 100,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomLeft,
                    end: Alignment.topLeft,
                    colors: [
                      Colors.transparent,
                      Colors.black.withOpacity(0.7),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        // 按钮层：给每个按钮添加点击事件
        Positioned(
          top: 10,
          right: 10,
          child: Row(
            children: [
              GestureDetector(
                onTap: () {
                  // 点赞按钮点击逻辑
                },
                child: const Icon(
                  Icons.favorite_border,
                  color: Colors.white,
                  size: 24,
                ),
              ),
              const SizedBox(width: 5),
              GestureDetector(
                onTap: () {
                  // 更多按钮点击逻辑
                },
                child: const Icon(
                  Icons.more_vert,
                  color: Colors.white,
                  size: 24,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

关键修改点 #

• 给右上角阴影Container包裹IgnorePointer，让点击事件穿透到下方的图片层
• 给点赞、更多按钮分别添加GestureDetector，实现独立的点击交互逻辑
• 保留原有阴影视觉效果与按钮可见性，确保所有功能正常触发

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