Flutter：如何为透明容器添加阴影？

Posted 2023-02-23

【中文标题】Flutter：如何为透明容器添加阴影？

【英文标题】：Flutter: How to add shadow to transparent container?

【发布时间】：2021-02-04 00:57:34

【问题描述】：

我只想在透明容器的边缘有一个阴影，如您在顶部导航栏中所见 [图 1]。 Boxshadow 在这种情况下不起作用，因为您会看到透明小部件后面的整个阴影。有没有办法只从边缘添加阴影？

感谢您的帮助

【问题讨论】：

所以您想要在容器的四个边缘上添加阴影？还是只有一个边缘？是内影还是外影？

容器阴影底部的外部阴影。它应该像一个从容器边缘开始的正常外观的阴影，因为正常的 boxshadow 也在容器后面，这使得它对于透明容器来说很难看。

谢谢pskink^^这就是我要找的。你解决了我的问题。您能否将您的评论写为答案，以便我将其标记为解决方案

【参考方案1】：

作为一种解决方法，您可以将容器的颜色设置为其背景颜色。然后你可以使用 BoxShadow。

【讨论】：

背景是动态的

【参考方案2】：

我试图弄清楚我们如何使用剪辑器来剪辑容器内部以消除阴影颜色。

这是我的解决方案：

首先，我创建了一个InvertedClipper，其任务是剪辑小部件的内部：

class InvertedClipper extends CustomClipper<Path> 


InvertedClipper();

  @override
  Path getClip(Size size) 
    return Path.combine(
      PathOperation.difference,
      Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
      Path()..addRect(Rect.fromLTWH(1, 1, size.width - 5, size.height - 5)),
    );
  

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;

为此，我关注了this interesting article。

也就是说，我马上尝试了剪辑器，但注意到如果你用阴影剪辑 Container，阴影会丢失 spread 和 blur。

谷歌搜索我偶然发现了 clip_shadow 包，它允许为剪辑的小部件添加阴影（这是你需要的）。

按照自述文件我这样做了：

class DummyHome extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: ClipShadow(
          boxShadow: [
            BoxShadow(
              color: Colors.black,
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
          clipper: InvertedClipper(),
          child: Container(
            height: 250,
            width: 250,
            color: Colors.transparent,
          ),
        ),
      ),
    );
  

这导致了这个结果：

抱歉，图片太大了，我不知道如何在 Markdown 中调整它的大小。除此之外，我希望这会有所帮助。

编码愉快！

【讨论】：

感谢 magiclean94 的参与 :) 是否有可能使阴影的开始部分变得清晰（没有模糊？）并且一路上变得模糊？当我提到我的照片时，你知道我的意思吗？由于该方法，阴影的开始和结束是模糊的。

我不确定你在问什么......我的意思是我无法弄清楚你在图片中指的是什么。因为boxShadow 是List<BoxShadow>，所以您可以使用不同偏移、模糊和散布的不同阴影，因此您可能会编排具有不同值的不同 BoxShadows 以提供所需的结果。我不确定我是否回答了你的问题

【参考方案3】：

试试这个自定义Decoration（如果需要，您可以添加一些其他参数，如背景颜色、渐变等）：

class FooDecoration extends Decoration 
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  FooDecoration(
    this.insets = const EdgeInsets.all(12) ,
    this.color = Colors.black,
    this.blurRadius = 8,
    this.inner = false,
  );
  @override
  BoxPainter createBoxPainter([void Function() onChanged]) => _FooBoxPainter(insets, color, blurRadius, inner);


class _FooBoxPainter extends BoxPainter 
  final EdgeInsets insets;
  final Color color;
  final double blurRadius;
  final bool inner;

  _FooBoxPainter(this.insets, this.color, this.blurRadius, this.inner);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) 
    var rect = offset & configuration.size;
    canvas.clipRect(rect);
    var paint = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, blurRadius);

    var path = Path();
    if (inner) 
      path
        ..fillType = PathFillType.evenOdd
        ..addRect(insets.inflateRect(rect))
        ..addRect(rect);
     else 
      path.addRect(insets.deflateRect(rect));
    
    canvas.drawPath(path, paint);
  

示例用法（注意所有参数都有一些默认值）：

child: Container(
  color: Colors.grey[200],
  child: Container(
    decoration: FooDecoration(
      insets: EdgeInsets.only(top: 15, bottom: 15),
      // color: Colors.black,
      // blurRadius: 8,
      // inner: true,
    ),
  ),
),