Flutter中如何用CustomPaint绘制带平滑曲线的图表线条

直接用drawLine()逐个绘制线段的话，线段连接处会是尖锐的——因为每条线段都是独立绘制的。想要实现平滑的弧形边角，你需要改用Path构建连续路径，再配合Paint的相关参数控制边角样式。

具体实现步骤： #

1. 构建连续路径：用Path的moveTo()定位到第一个点，再通过lineTo()依次连接后续所有点，形成一条完整的连续路径。
2. 配置Paint关键参数：设置strokeJoin为StrokeJoin.round，这会让线段连接处变成平滑圆角；如果需要线段端点也平滑，可以同时设置strokeCap为StrokeCap.round。
3. 绘制完整路径：用canvas.drawPath()替代多次drawLine()，一次性绘制整条路径。

修正后的完整代码示例： #

注：你原代码里有个语法错误——Offset(points[i + 1].dx), points[i + 1].dy)多了一个右括号，以下代码已修正。

class SmoothLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    List<Offset> points = const [
      Offset(0, 10),
      Offset(100, 300),
      Offset(300, 100),
      Offset(600, 500),
    ];

    final Paint xPaint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 8 // 线条宽度决定圆角大小，宽度越粗圆角弧度越大
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round // 核心：设置连接处为圆角
      ..strokeCap = StrokeCap.round; // 可选：让线段端点也呈现平滑圆形

    // 构建连续路径
    Path path = Path();
    if (points.isNotEmpty) {
      path.moveTo(points[0].dx, points[0].dy);
      for (int i = 1; i < points.length; i++) {
        path.lineTo(points[i].dx, points[i].dy);
      }
    }

    // 绘制路径
    canvas.drawPath(path, xPaint);
  }

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

参数说明： #

• strokeJoin.round：控制两条线段连接处的样式，设置为round后，连接处会生成与线条宽度匹配的圆角。
• strokeCap.round：可选参数，让线段的起始、结束端点从尖锐直角变成平滑圆形。

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