如何为CustomClipper创建的小部件制作合适的边框和阴影 [英] How to make suitable border and shadow for a widget created by CustomClipper
问题描述
我在使用CustomClipper
的ClipPath
内有一个Container
小部件.一切正常,我具有所需的小部件形状.
I have a Container
widget inside of a ClipPath
which uses a CustomClipper
. Everything works fine, I have the desired widget shape.
但是,我找不到这种自定义形状的Widget产生阴影的方法. 另外,我想有一个自动跟随此自定义小部件边缘的轮廓(边框).
However, I could not find a way to make a shadow for this custom shaped Widget. Also, I want to have an outline(border) that follows the edges of this custom widget automatically.
再没有运气.我尝试了BoxDecoration:border
,BoxDecoration:boxShadow
,ShapeDecoration:shape
,ShapeDecoration:shadows
,Material:Elevation
等.
Again no luck. I tried BoxDecoration:border
, BoxDecoration:boxShadow
, ShapeDecoration:shape
, ShapeDecoration:shadows
, Material:Elevation
, etc..
推荐答案
基于@Bohdan Uhrynovskiy,我进一步研究并提出了以下解决方案:
based on @Bohdan Uhrynovskiy I investigated further and came up with this solution:
CustomPaint(
painter: BoxShadowPainter(),
child: ClipPath(
clipper: MyClipper(), //my CustomClipper
child: Container(), // my widgets inside
)));
class BoxShadowPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Path path = Path();
// here are my custom shapes
path.moveTo(size.width, size.height * 0.14);
path.lineTo(size.width, size.height * 1.0);
path.lineTo(size.width - (size.width *0.99) , size.height);
path.close();
canvas.drawShadow(path, Colors.black45, 3.0, false);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
您必须在BoxShadowPainter
的paint()
方法中提供自己的自定义路径
You must need to provide your own custom paths in paint()
method of BoxShadowPainter
这篇关于如何为CustomClipper创建的小部件制作合适的边框和阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!