如何在Flutter中为CustomPainter绘制的三角形添加圆角效果

你可以通过修改路径绘制逻辑，给三角形的每个顶点添加圆弧过渡实现圆角效果，修改后的MyPainter代码如下：

class MyPainter extends CustomPainter {
  // 圆角半径，可根据需求调整数值大小
  final double _radius = 6;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.yellow
      ..style = PaintingStyle.fill;

    final path = Path();
    // 处理左上角直角圆角
    path.moveTo(0, _radius);
    path.arcToPoint(Offset(_radius, 0), radius: Radius.circular(_radius));
    
    // 处理右上角顶点圆角
    path.lineTo(size.width - _radius, 0);
    path.arcToPoint(Offset(size.width, _radius), radius: Radius.circular(_radius));
    
    // 处理斜边下端点圆角，闭合路径
    path.lineTo(_radius, size.height);
    path.arcToPoint(Offset(0, size.height - _radius), radius: Radius.circular(_radius));
    
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

你原来代码中Container设置的borderRadius不会作用到CustomPainter绘制的三角形区域，可以直接删除冗余配置。如果三角形顶点坐标和你实际需要的不符，只需对应调整每个顶点的圆角切入、切出坐标即可，圆弧过渡的绘制逻辑是通用的。

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