Flutter中如何用CustomPaint为三角形填充路径添加正确内阴影

直接使用MaskFilter导致阴影覆盖整个三角形，是因为默认模糊阴影是向外扩散的。要实现内阴影，核心思路是用反向路径生成阴影，再通过裁剪限制阴影只显示在三角形内部，具体实现如下：

实现代码示例 #

class TriangleInnerShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 1. 定义你给出的三角形路径
    final trianglePath = Path()
      ..moveTo(size.width * 0.5, 0)
      ..lineTo(size.width * (92.3683/99), size.height)
      ..lineTo(size.width * (6.63174/99), size.height)
      ..close();

    // 先绘制三角形基础填充色
    final fillPaint = Paint()..color = Colors.white;
    canvas.drawPath(trianglePath, fillPaint);

    // 2. 创建反向路径：用超大矩形减去原三角形，生成阴影绘制区域
    final shadowPath = Path()
      ..addRect(Rect.fromLTWH(-size.width, -size.height, size.width * 3, size.height * 3))
      ..addPath(trianglePath, Offset.zero)
      ..fillType = PathFillType.evenOdd;

    // 3. 设置内阴影样式
    final shadowPaint = Paint()
      ..color = const Color(0xFF888888)
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 3.0);

    // 4. 裁剪到原三角形区域，只显示内部阴影
    canvas.save();
    canvas.clipPath(trianglePath);
    canvas.drawPath(shadowPath, shadowPaint);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

关键逻辑说明 #

1. 先画基础填充：确保三角形底色先渲染，避免阴影覆盖整个图形。
2. 反向路径生成：通过evenOdd填充类型，让超大矩形与原三角形的重叠区域被排除，剩下的区域就是阴影的绘制范围。
3. 裁剪限制：用clipPath把绘制范围锁定在原三角形内部，这样反向路径的阴影只会从三角形边缘向内扩散，形成内阴影效果。

调整技巧 #

• 修改MaskFilter.blur的第二个参数可以控制阴影的模糊程度
• 调整shadowPaint.color可以改变阴影的深浅色调
• 叠加多层不同模糊度的阴影，可以实现更自然的内阴影效果

内容的提问来源于stack exchange，提问作者Jonathan