Question

我在Container内有一个ClipPath小部件，它使用CustomClipper。一切正常，我具有所需的小部件形状。

但是，我找不到这种自定义形状的Widget产生阴影的方法。另外，我想有一个自动跟随此自定义小部件边缘的轮廓（边框）。

再没有运气。我尝试了BoxDecoration:border，BoxDecoration:boxShadow，ShapeDecoration:shape，ShapeDecoration:shadows，Material:Elevation等。

Answer 1

查看library的源代码。该库中实现的功能似乎与您的任务非常相似。

您必须实现可绘制阴影和边框的CustomPainter。

return AspectRatio(
        aspectRatio: 1.0,
        child: CustomPaint(
            painter: BoxShadowPainter(specs, boxShadows),
            child: ClipPath(
              clipper: Polygon(specs),
              child: child,
            )));

Answer 2

基于@Bohdan Uhrynovskiy，我进一步调查并提出了以下解决方案：

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;
  }
}

您必须在paint()的{{1}}方法中提供自己的自定义路径

如何为CustomClipper创建的小部件制作合适的边框和阴影

2 个答案: