如何仅在容器的特定一侧添加阴影？

Question

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

npm -g

此代码有效，但在容器的每个可能的侧面都增加了阴影。我只希望它在右侧。

Answer 1

例如，您可以设置BoxShadow的offset属性

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

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

Answer 2

请注意，MyShadowSize = spreadRadius + x / y偏移量。 示例：

• 如果spreadRadius：1，偏移量：Offset（0，0）=> 4面是MyShadowSize，则具有1 + 0 = 1。
• 如果只希望底部阴影= 1，则可以添加：spreadRadius：0，偏移量：Offset（0，1）， 说明：当前y偏移量= 1，=> MyShadowSize底部= 1，MyShadowSize顶部= -1（因为y向下移动）=> MyShadowSize顶部未显示。

Answer 3

boxShadow的

BoxDecoration属性采用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)),
        ],
      ),
    ),
  ),
);

屏幕截图