Flutter：如何在CustomPainter中同时实现阴影与边框

要同时显示阴影和边框，你需要分步骤绘制不同层级的内容：先画偏移后的阴影，再画原始路径的填充（可选），最后画原始路径的边框描边。原来的代码只处理了阴影，没对路径本身做填充或描边，所以无法同时看到边框。

修改后的完整代码如下：

class MyPainter extends CustomPainter {
  final Shadow shadow;
  final CustomClipper<Path> clipper;
  final Color borderColor;
  final double borderWidth;
  final Color? fillColor; // 可选填充色，不需要可移除

  MyPainter({
    required this.shadow,
    required this.clipper,
    required this.borderColor,
    required this.borderWidth,
    this.fillColor,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final originalPath = clipper.getClip(size);
    
    // 1. 绘制阴影：路径偏移阴影的offset，用shadow对应的Paint
    final shadowPaint = shadow.toPaint();
    final shadowPath = originalPath.shift(shadow.offset);
    canvas.drawPath(shadowPath, shadowPaint);

    // 2. 绘制路径填充（如果设置了填充色）
    if (fillColor != null) {
      final fillPaint = Paint()..color = fillColor!;
      canvas.drawPath(originalPath, fillPaint);
    }

    // 3. 绘制边框描边：设置Paint的style为stroke
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;
    canvas.drawPath(originalPath, borderPaint);
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    // 参数变化时触发重绘
    return oldDelegate.shadow != shadow ||
        oldDelegate.clipper != clipper ||
        oldDelegate.borderColor != borderColor ||
        oldDelegate.borderWidth != borderWidth ||
        oldDelegate.fillColor != fillColor;
  }

  @override
  bool shouldRebuildSemantics(MyPainter oldDelegate) => false;
}

关键点说明 #

• 阴影需要基于偏移后的路径绘制，这样阴影才会在正确的位置；
• 填充和边框必须基于原始路径绘制，避免偏移导致位置错位；
• 绘制顺序很重要：阴影→填充→边框，这样上层内容会覆盖下层的阴影边缘，视觉更自然；
• 更新shouldRepaint方法，确保新增的参数变化时能触发重绘。

如果不需要填充色，直接删除fillColor相关的变量和代码即可。

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