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

Question

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

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

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

Answer 1

这是一种方法：

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,
        )
      ],
    ),
  ),
)

*** ：无论你给哪一边留余量，那一边都会显示阴影。为多方提供余量也是有效的。

Answer 2

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

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

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

Answer 3

boxShadow的属性BoxDecoration采用 的列表BoxShadow，因此您可以将solid 传递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)),
        ],
      ),
    ),
  ),
);

截屏

Answer 4

A box shadow is actually just a tinted, blurred and shifted version of the parent object which is then rendered underneath it. That's why having a box shadow just on one side isn't trivial.

The most straight forward solution is to cut off the shadow on the sides where you do not need it. In Flutter this can be nicely achieved via the CustomClipper class. The example below clips the entire shadow of the object except on the sides where we define a padding (which should be at least as large as the overlapping shadow).

/// Clips the given object by its size.
/// The clip area can optionally be enlarged by a given padding.
class ClipPad extends CustomClipper<Rect> {
  final EdgeInsets padding;
    
  const ClipPad({
    this.padding = EdgeInsets.zero
  });
  
  @override
  Rect getClip(Size size) => padding.inflateRect(Offset.zero & size);

  @override
  bool shouldReclip(ClipPad oldClipper) => oldClipper.padding != padding;
}


ClipRect(
  clipper: const ClipPad(
    padding: EdgeInsets.only(left: 30, top:30)
  ),
  child: Container(
    width: 200,
    height: 200,
    decoration: const BoxDecoration(
      color: Colors.black,
      boxShadow: [
        BoxShadow(
          color: Colors.red,
          blurRadius: 20,
        )
      ]
    )
  )
);

Note: You might want to use a different Clipper-Widget and CustomClipper for shapes other than rectangles like for example ClipRRect or ClipPath.