Flutter BoxShadow 重叠的 sibling

Question

我正在尝试创建一个 Row 容器，它们都有一个 BoxShadow。阴影非常大，因此跨越父级之外的空间，所以我在父级上使用 clipBehavior: Clip.none。

问题在于，对于行中的每个容器，它的阴影都会重叠到前一个容器中。我在下面设置了一些大胆的颜色来强调这个问题。如您所见，前一个 Container 的右侧从下一个 Container 获得阴影。

这是我的代码

return SingleChildScrollView(
    clipBehavior: Clip.none,
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        _ShadowedBox(),
        _ShadowedBox(),
        _ShadowedBox(),
      ],
    ),
  );


class _ShadowedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 144,
      child: Column(
        children: [
          SizedBox(
            width: 144,
            height: 144,
            child: Container(
                decoration: BoxDecoration(
                              color: Colors.grey,
                              shape: BoxShape.rectangle,
                              borderRadius: BorderRadius.circular(cardRadius),
                              boxShadow: [
                                BoxShadow(
                                  offset: const Offset(0.0, 6.0),
                                  blurRadius: 38.0,
                                  spreadRadius: 0.0,
                                  color: Colors.red,
                                ),
                                BoxShadow(
                                  offset: const Offset(0.0, 6.0),
                                  blurRadius: 46.0,
                                  spreadRadius: 0.0,
                                  color: Colors.green,
                                ),
                                BoxShadow(
                                  offset: const Offset(0.0, 6.0),
                                  blurRadius: 10.0,
                                  spreadRadius: 0.0,
                                  color: Colors.blue,
                                ),
                              ]
                          ),
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(cardRadius),
                    child: Image.network("https://via.placeholder.com/400x400.png?text=Coming%20soon", fit: BoxFit.contain)
            ),
          ),
        ],
      ),
    );
  }
}

谁能建议如何阻止阴影渗入其他容器，同时仍然能够显示未被父容器剪裁的阴影？

Answer 1

好的，我已经测试了 2 种方法来解决您的问题。作为Wapazz说，你的每个 Container 都是用自己的阴影单独绘制的，所以它们会重叠。

解决方案 #1

一种解决方案是将阴影效果应用到您的 Row 小部件而不是 _ShadowedBox，但阴影效果不会那么精确:

代码

SingleChildScrollView(
  clipBehavior: Clip.none,
  scrollDirection: Axis.horizontal,
  child: UnconstrainedBox(
    child: Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            offset: const Offset(0.0, 6.0),
            blurRadius: 38.0,
            spreadRadius: 0.0,
            color: Colors.red,
          ),
          BoxShadow(
            offset: const Offset(0.0, 6.0),
            blurRadius: 46.0,
            spreadRadius: 0.0,
            color: Colors.green,
          ),
          BoxShadow(
            offset: const Offset(0.0, 6.0),
            blurRadius: 10.0,
            spreadRadius: 0.0,
            color: Colors.blue,
          ),
        ],
      ),
      child: Row(
        children: List<Widget>.generate(10, (_) => _ShadowedBox()),
      ),
    ),
  ),
),

结果

解决方案 #2

我发现的另一个解决方案是使用 Stack 小部件，所有阴影都在单独的 Row 中呈现，因此生成的阴影具有正确的形状。此方法的问题是您的小部件需要固定的 width 和 height:

代码

SingleChildScrollView(
  clipBehavior: Clip.none,
  scrollDirection: Axis.horizontal,
  child: Stack(
    children: [
      Row(
        children: List<Widget>.generate(
          10,
          (_) => Container(
            margin: const EdgeInsets.symmetric(horizontal: 4),
            width: 144,
            height: 144,
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(cardRadius),
              boxShadow: [
                BoxShadow(
                  offset: const Offset(0.0, 6.0),
                  blurRadius: 38.0,
                  spreadRadius: 0.0,
                  color: Colors.red,
                ),
                BoxShadow(
                  offset: const Offset(0.0, 6.0),
                  blurRadius: 46.0,
                  spreadRadius: 0.0,
                  color: Colors.green,
                ),
                BoxShadow(
                  offset: const Offset(0.0, 6.0),
                  blurRadius: 10.0,
                  spreadRadius: 0.0,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
      Row(
        children: List<Widget>.generate(10, (_) => _ShadowedBox()),
      ),
    ],
  ),
)

结果

You can try my full test code on DartPad