求助：Flutter Custom Clipper无法实现目标形状及添加边框

问题分析 #

你当前的CustomClipper路径基本能勾勒出目标形状，但存在两个核心问题：

1. 路径坐标未完全匹配SVG的比例关系，导致形状略有偏差
2. 直接给ClipPath子组件加边框会被裁剪失效（因为边框绘制在组件边缘，会被裁剪路径切掉超出部分）

以下是针对性的解决方案：

一、修正CustomClipper路径（适配任意尺寸） #

优化路径计算逻辑，用相对比例替代固定数值，确保形状在不同尺寸下保持一致：

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // 根据SVG比例计算相对尺寸
    final double topOffsetRatio = 8 / 110; // SVG顶部y=8，总高度110
    final double notchTopRatio = 1.735 / 110; // 缺口顶部y值比例
    final double leftMarginRatio = 6 / 132; // SVG左侧边距比例
    final double rightMarginRatio = 6.075 / 132; // SVG右侧边距比例
    final double notchWidthRatio = 18.829 / 132; // 缺口横向宽度比例

    final double topY = size.height * topOffsetRatio;
    final double notchTopY = size.height * notchTopRatio;
    final double leftX = size.width * leftMarginRatio;
    final double rightX = size.width * (1 - rightMarginRatio);
    final double notchStartX = rightX - size.width * notchWidthRatio;
    final double notchEndX = rightX - size.width * notchWidthRatio * 0.86;

    List<Offset> polygon = [
      Offset(leftX, topY),
      Offset(notchStartX, topY),
      Offset(notchStartX + size.width * 0.007, notchTopY),
      Offset(notchStartX + size.width * 0.003, notchTopY * 0.6),
      Offset(notchStartX - size.width * 0.001, notchTopY),
      Offset(notchEndX, topY),
      Offset(rightX, topY),
      Offset(rightX, size.height - topY),
      Offset(leftX, size.height - topY),
    ];

    return Path()
      ..addPolygon(polygon, true)
      ..close();
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false; // 无参数变化时无需重绘，提升性能
  }
}

二、添加边框的两种可行方案 #

方案1：使用CustomPaint直接绘制（推荐，性能更优） #

无需依赖ClipPath，直接通过CustomPaint同时绘制填充和边框，完全避免裁剪问题：

class CustomShapePainter extends CustomPainter {
  final Color fillColor;
  final Color borderColor;
  final double borderWidth;

  CustomShapePainter({
    required this.fillColor,
    required this.borderColor,
    this.borderWidth = 1.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 填充画笔
    final fillPaint = Paint()..color = fillColor;
    // 边框画笔
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;

    // 复用修正后的路径逻辑
    final double topOffsetRatio = 8 / 110;
    final double notchTopRatio = 1.735 / 110;
    final double leftMarginRatio = 6 / 132;
    final double rightMarginRatio = 6.075 / 132;
    final double notchWidthRatio = 18.829 / 132;

    final double topY = size.height * topOffsetRatio;
    final double notchTopY = size.height * notchTopRatio;
    final double leftX = size.width * leftMarginRatio;
    final double rightX = size.width * (1 - rightMarginRatio);
    final double notchStartX = rightX - size.width * notchWidthRatio;
    final double notchEndX = rightX - size.width * notchWidthRatio * 0.86;

    final path = Path()
      ..moveTo(leftX, topY)
      ..lineTo(notchStartX, topY)
      ..lineTo(notchStartX + size.width * 0.007, notchTopY)
      ..lineTo(notchStartX + size.width * 0.003, notchTopY * 0.6)
      ..lineTo(notchStartX - size.width * 0.001, notchTopY)
      ..lineTo(notchEndX, topY)
      ..lineTo(rightX, topY)
      ..lineTo(rightX, size.height - topY)
      ..lineTo(leftX, size.height - topY)
      ..close();

    // 先绘制填充，再绘制边框
    canvas.drawPath(path, fillPaint);
    canvas.drawPath(path, borderPaint);
  }

  @override
  bool shouldRepaint(CustomShapePainter oldDelegate) {
    return oldDelegate.fillColor != fillColor ||
        oldDelegate.borderColor != borderColor ||
        oldDelegate.borderWidth != borderWidth;
  }
}

使用方式：

CustomPaint(
  size: const Size(132, 110), // 可根据需求调整尺寸
  painter: CustomShapePainter(
    fillColor: Colors.white,
    borderColor: const Color(0xFFEAECEE),
    borderWidth: 1.0,
  ),
)

方案2：双层ClipPath实现边框 #

利用两层ClipPath嵌套，外层作为边框，内层作为内容区域：

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    width: 132,
    height: 110,
    color: const Color(0xFFEAECEE), // 边框颜色
    child: Padding(
      padding: const EdgeInsets.all(1.0), // 边框宽度
      child: ClipPath(
        clipper: MyCustomClipper(),
        child: Container(color: Colors.white), // 填充色
      ),
    ),
  ),
)

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