如何在 Flutter 中为自定义形状创建内阴影？答案

【问题标题】：How to create an inner shadow for custom shape in Flutter?如何在 Flutter 中为自定义形状创建内阴影？
【发布时间】：2021-03-07 08:59:26
【问题描述】：

下面是我想给一个内部阴影的自定义形状：

下面是我用来创建这个形状的代码：（文本部分不包含在代码中）

class TitleContainerPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint

    Paint x = Paint()..color = Colors.grey ..style = PaintingStyle.fill;
    Path a = Path();

    a.moveTo(size.height * 0.5, 0);
    a.lineTo(size.width * 0.3, 0);
    a.cubicTo(size.width * 0.325, 0, size.width * 0.325, size.height * 0.5 - 10, size.width * 0.35, size.height * 0.5 - 10);
    a.lineTo(size.width * 0.825, size.height * 0.35);
    a.cubicTo(size.width * 0.85, size.height * 0.5 - 10, size.width * 0.85, size.height * 0.15, size.width * 0.875, size.height * 0.15);
    a.lineTo(size.width - size.height * 0.25, size.height * 0.15);
    a.arcTo(Rect.fromCircle(center: Offset(size.width - size.height * 0.35,size.height * 0.5), radius: size.height * 0.35), -pi/2, pi, false);
    a.lineTo(size.width * 0.875, size.height * 0.85);
    a.cubicTo(size.width * 0.85, size.height * 0.85, size.width * 0.85, size.height * 0.5 + 10, size.width * 0.825, size.height * 0.5 + 10);
    a.lineTo(size.width * 0.35, size.height * 0.65);
    a.cubicTo(size.width * 0.325, size.height * 0.5 + 10, size.width * 0.325, size.height, size.width * 0.3, size.height);
    a.lineTo(size.height * 0.5, size.height);
    a.arcTo(Rect.fromCircle(center: Offset(size.height * 0.5,size.height * 0.5), radius: size.height * 0.5), pi/2, pi, false);

    canvas.drawPath(a, x);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }


}

正如问题中提到的，我的目标是为这个形状添加一个内部阴影，如下图所示：

有人可以帮我实现吗？

提前谢谢你。

【问题讨论】：

检查MaskFilter.blur构造函数
@pskink 您能否提供一个代码来说明如何正确执行此操作。我之前尝试过 mask filer.blur，BlurStyle.normal 提供了我想要的阴影，但它既是外部的又是内部的，我可以将它与剪辑路径重叠以隐藏外部阴影，但我认为这不是一个好的选择，我也尝试了内部和外部 BlurStyle，但它提供了一些奇怪的结果。
你的颜料的高度和宽度是多少？
@TipuSultan 高度为 60（常数值），宽度为屏幕宽度的 70%（使用 MediaQuery 缩放）
var r = (Offset.zero & size); canvas.clipRect(r); var r1 = r.deflate(32); var p = Path() ..fillType = PathFillType.evenOdd ..addRect(r) ..addRRect(RRect.fromRectAndRadius(r1, Radius.circular(64))); canvas.drawPath(p, Paint()..maskFilter = MaskFilter.blur(BlurStyle.outer, 8)

标签： flutter flutter-canvas

【解决方案1】：

像这样使用你的颜料：

Paint x = Paint()
      ..style = PaintingStyle.fill
      ..maskFilter = MaskFilter.blur(BlurStyle.inner, 5)
      ..color = Colors.grey;

输出：

【讨论】：

【解决方案2】：

//像这样改变你的灰色的alpha颜色

canvas.drawShadow(path, Colors.grey.withAlpha(50), -4.0, false);

这里的阴影将是内部的。

【讨论】：

【解决方案3】：

我提出了与my other answer 中给出的相同方法。在您的情况下，您只需使用 CustomPaint 小部件作为内部阴影小部件的子小部件：

InnerShadow(
  shadow: const BoxShadow(
    blurRadius: 20,
    color: Colors.black,
  ),
  child: CustomPaint(painter: TitleContainerPaint()),
)

完整的代码可以在这里找到https://codepen.io/priezz/pen/abBRmrb

附：您的 TitleContainerPaint 给出的形状与示例图像中给出的形状略有不同，您可能需要对其进行调整。也许这只是 Flutter for Web 的问题。

【讨论】：