如何在CustomPainter绘制的图形中间绘制弧形并合并为单一图形

可以直接修改MyCustomPainter中的路径逻辑，把半圆形整合到现有路径里，形成单一的闭合形状，不需要依赖Stack。以下是调整后的完整代码：

修改后的CustomPainter代码 #

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    // 可自定义的尺寸参数
    final double cornerRadius = 20.0; // 顶部左右圆角半径
    final double semiCircleRadius = 25.0; // 中间半圆半径
    final centerX = size.width / 2;
    final semiCircleCenterY = -semiCircleRadius; // 半圆中心Y坐标（向上突出）

    final path = Path();

    // 从左下角开始构建路径
    path.moveTo(0, size.height);
    // 向上到左侧圆角起点
    path.lineTo(0, cornerRadius);
    // 绘制左侧顶部圆角
    path.quadraticBezierTo(0, 0, cornerRadius, 0);
    // 移动到半圆形左端点
    path.lineTo(centerX - semiCircleRadius, 0);
    // 绘制向上凸起的半圆形
    path.arcTo(
      Rect.fromCircle(center: Offset(centerX, semiCircleCenterY), radius: semiCircleRadius),
      pi, // 起始角度（180°，指向左）
      pi, // 扫过角度（180°，顺时针绘制半圆）
      false,
    );
    // 移动到右侧圆角起点
    path.lineTo(size.width - cornerRadius, 0);
    // 绘制右侧顶部圆角
    path.quadraticBezierTo(size.width, 0, size.width, cornerRadius);
    // 向下到右下角
    path.lineTo(size.width, size.height);
    // 闭合路径，回到起点
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

简化后的父组件代码 #

原Stack可以直接移除，因为现在是单一形状绘制：

Container(
  height: 85,
  color: Colors.blueGrey,
  child: CustomPaint(
    size: Size(size.width, 85),
    painter: MyCustomPainter(),
  ),
),

说明 #

• 如果需要向下凹陷的半圆形，只需调整半圆的中心Y坐标为semiCircleRadius，并修改arcTo的参数：

  final semiCircleCenterY = semiCircleRadius;
  // ...
  path.arcTo(
    Rect.fromCircle(center: Offset(centerX, semiCircleCenterY), radius: semiCircleRadius),
    0, // 起始角度（0°，指向右）
    pi, // 扫过角度（180°，顺时针绘制向下的半圆）
    false,
  );
  

• 所有尺寸参数（cornerRadius、semiCircleRadius）都可以根据需求灵活调整，适配不同的UI设计。

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