如何在Flutter CustomPainter中绘制带边框的圆形气泡？

你当前的代码把圆形和尖端作为两个独立子路径添加到同一个Path中，绘制时两者会被分别处理，导致边框各自独立，视觉上出现分离。要实现完整的气泡效果，需要构建单一的闭合路径，将圆形底部与尖端无缝连接。

修改后的完整代码 #

import 'dart:math' as math;

// ... 在CustomPainter的paint方法中
final path = Path();

// 基础参数定义
final center = Offset(size.width / 2, size.height / 2 - 10);
final radius = size.width / 2;
// 尖端与圆形的左右连接点
final leftConnectPoint = Offset(center.dx - 10, center.dy + radius);
final rightConnectPoint = Offset(center.dx + 10, center.dy + radius);
// 尖端底部点
final tipBottomPoint = Offset(center.dx, center.dy + radius + 12);

// 计算连接点对应的圆弧角度（Flutter坐标系：0弧度向右，逆时针旋转）
final angleOffset = math.atan(10 / radius);
final leftAngle = math.pi - angleOffset; // 左连接点的角度
final sweepAngle = 2 * math.pi - 2 * angleOffset; // 圆弧扫过的角度

// 构建完整闭合路径
path.moveTo(leftConnectPoint.dx, leftConnectPoint.dy);
// 绘制圆形的主体圆弧（从左连接点逆时针绕到右连接点）
path.addArc(
  Rect.fromCircle(center: center, radius: radius),
  leftAngle,
  sweepAngle,
);
// 从右连接点画到尖端底部
path.lineTo(tipBottomPoint.dx, tipBottomPoint.dy);
// 从尖端底部回到左连接点，闭合路径
path.lineTo(leftConnectPoint.dx, leftConnectPoint.dy);
path.close();

// 绘制填充和边框
canvas.drawPath(path, paint);
canvas.drawPath(path, borderPaint);

关键说明 #

1. 单一闭合路径：不再使用addOval添加完整圆形，而是用addArc绘制圆形的部分圆弧，再通过直线连接到尖端，形成一个连续的闭合路径。
2. 角度计算：根据连接点的水平偏移（10）和圆形半径，计算圆弧的起始角度和扫过角度，确保圆弧恰好覆盖圆形除底部缺口外的所有区域。
3. 无缝连接：路径从左连接点出发，经过圆弧到右连接点，再连接到尖端底部，最后回到左连接点，整个形状成为一个整体，填充和描边都会作用于完整路径，不会出现分离的边框。

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