Flutter如何实现指定复杂UI形状？CustomPainter绘制效果不符

你的代码存在的问题 #

• 颜色值无效：Color(0xff00baa33ef)格式错误，ARGB十六进制应为8位（0xFF+6位颜色码），多写一位会导致颜色解析异常。
• 路径逻辑混乱：大量重复的cubicTo调用，部分点坐标完全相同，绘制顺序不清晰，且未正确闭合路径，直接导致边角缺失。
• 不必要的重绘：shouldRepaint始终返回true，会造成无意义的性能消耗，静态形状可直接返回false。

修正后的代码示例 #

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 修正颜色值，可根据需求自行调整颜色码
    final Paint paint = Paint()
      ..color = const Color(0xFF00BAA3)
      ..style = PaintingStyle.fill;

    final Path path = Path();
    // 从右上角起点开始，按顺时针顺序绘制路径
    path.moveTo(size.width, size.height * 0.3);

    // 右上角弧形区域
    path.cubicTo(
      size.width, size.height * 0.23,
      size.width * 0.98, size.height * 0.18,
      size.width * 0.95, size.height * 0.18,
    );
    path.lineTo(size.width * 0.84, size.height * 0.18);
    path.cubicTo(
      size.width * 0.82, size.height * 0.18,
      size.width * 0.8, size.height * 0.16,
      size.width * 0.79, size.height * 0.13,
    );
    path.lineTo(size.width * 0.77, size.height * 0.06);
    path.cubicTo(
      size.width * 0.75, size.height * 0.03,
      size.width * 0.74, 0,
      size.width * 0.72, 0,
    );
    // 顶部左侧直线
    path.lineTo(size.width * 0.07, 0);
    // 左上角圆角
    path.cubicTo(
      size.width * 0.03, 0,
      0, size.height * 0.06,
      0, size.height * 0.13,
    );
    // 左侧直线到底部
    path.lineTo(0, size.height * 0.9);
    // 左下角圆角
    path.cubicTo(
      0, size.height * 0.96,
      size.width * 0.03, size.height,
      size.width * 0.07, size.height,
    );
    // 底部直线到右侧
    path.lineTo(size.width * 0.95, size.height);
    // 右下角圆角
    path.cubicTo(
      size.width * 0.98, size.height,
      size.width, size.height * 0.96,
      size.width, size.height * 0.9,
    );
    // 右侧直线回到起点，显式闭合路径
    path.lineTo(size.width, size.height * 0.3);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // 静态形状无需重复绘制，返回false；若有动态属性，可对比属性后返回结果
    return false;
  }
}

关键优化点 #

• 修正颜色格式：确保十六进制颜色码为标准的8位格式。
• 梳理绘制顺序：按顺时针方向依次绘制节点，避免路径跳转混乱。
• 显式闭合路径：使用path.close()确保路径首尾无缝连接，彻底解决边角缺失问题。
• 简化冗余代码：去掉重复的曲线调用，用lineTo替代相同坐标的cubicTo，提升代码可读性。
• 优化重绘逻辑：静态形状返回false，减少不必要的性能消耗。

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