如何只在容器的特定一侧添加阴影？答案

【问题标题】：How to only add a shadow on one specific side of a Container?如何只在容器的特定一侧添加阴影？
【发布时间】：2019-11-18 05:04:57
【问题描述】：

我正在尝试使用 BoxDecoration 小部件中的 boxShadow 参数仅在容器小部件的右侧添加阴影。

new Container(
  decoration: BoxDecoration(
    color: Colors.grey.withOpacity(0.5),
    boxShadow: [
      BoxShadow(
        blurRadius: 5.0
      ),
    ],
  ),
),

此代码有效，但在容器的每一侧都添加了阴影。我希望它只在右侧。

【问题讨论】：

标签： flutter dart flutter-layout box-shadow

【解决方案1】：

您可以设置BoxShadow 的offset 属性。它被定义为Offset(double dx, double dy)。所以，例如：

boxShadow: [
  BoxShadow(
    blurRadius: 5.0,
    offset: Offset(3.0, 0),
  ),
],

这只会在右侧 3 个单位处投射阴影 (dx)。

【讨论】：

感谢您的回复，这似乎使右侧的阴影比另一侧“更大”，但似乎仍然没有摆脱另一侧的阴影：/跨度>
我现在不在我的机器上，但你能尝试调整一下 blurRadius，我怀疑由于 blurRadius 大于 x 偏移量，仍然可以产生大约 2 个单位的阴影在 Container 的左侧可以看到。
这是我的第一个想法，因此我尝试将 blurRadius 设置为低至 0.5，但容器似乎仍然比其父小部件有所升高（由于另一侧的剩余阴影）。
^这会将整个阴影移动到右侧 3 个像素，而不是仅在右侧绘制。

【解决方案2】：

注意 MyShadowSize = spreadRadius + x/y Offset。示例：

如果 spreadRadius: 1, offset: Offset(0, 0) => 4 边是 MyShadowSize 有 1 + 0 = 1。
如果只想要底部阴影 = 1，可以添加：spreadRadius: 0, offset: Offset(0, 1), 说明：当前 y 偏移 = 1，=> MyShadowSize bottom = 1，MyShadowSize top = -1（因为 y 向下移动）=> MyShadowSize top 不显示。

【讨论】：

我很抱歉，但我要投反对票，因为它很难阅读，而且我不确定它是否有意义。你能进一步解释一下吗？

【解决方案3】：

BoxDecoration 的boxShadow 属性采用BoxShadow 的列表，因此您可以将实心BoxShadow 传递给具有背景颜色的其余边和角。请注意，拐角处仍留有一个小阴影，但是嘿！...生活并不完美；）

return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(title: Text('Shadow Test')),
  body: Center(
    child: Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        boxShadow: [
          BoxShadow(blurRadius: 8.0),
          BoxShadow(color: Colors.white, offset: Offset(0, -16)),
          BoxShadow(color: Colors.white, offset: Offset(0, 16)),
          BoxShadow(color: Colors.white, offset: Offset(-16, -16)),
          BoxShadow(color: Colors.white, offset: Offset(-16, 16)),
        ],
      ),
    ),
  ),
);

截图

【讨论】：

【解决方案4】：

这是一种方式：

Container(
  width: 230,
  height: 200,
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(),
  child: Container(
    margin: EdgeInsets.only(right: 30), // ***
    decoration: BoxDecoration(
      color: Colors.blue,
      boxShadow: [
        BoxShadow(
          color: Colors.red,
          blurRadius: 20,
          spreadRadius: 8,
        )
      ],
    ),
  ),
)

*** : 无论你给哪一边留出边距，那一边都会显示阴影。给多个边留边距也有效。

【讨论】：

【解决方案5】：

为了避免此处其他答案的丑陋边缘，您可以这样做。

 final oneSideShadow = Padding(
  padding: const EdgeInsets.only(left: 30, right: 30, top: 30),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: borderRadius,
      boxShadow: [
        BoxShadow(
          color: Colors.red.withOpacity(0.95),
          blurRadius: 26,
          offset: const Offset(0, 2), // changes position of shadow
        ),
      ],
    ),
  ),
);

return Container(
  width: 200,
  height: 200,
  child: Stack(
    children: [
      oneSideShadow,
      Container(
        decoration: const BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    ],
  ),
);

你可以用这个得到非常疯狂的结果，例如如果你修改上面的代码，并在其中放置具有不同阴影的行+扩展子项。

【讨论】：