如何为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屋！