我只想在透明容器的边缘上有一个阴影,就像您在顶部导航栏中看到的那样[图片1]。 Boxshadow在这种情况下不起作用,因为您会看到透明小部件后面的整个阴影。有没有一种方法只能从边缘添加阴影?
我感谢您的帮助
最佳答案
试试这个自定义的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,
),
),
),
关于flutter - Flutter:如何在透明容器中添加阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64458009/