Flutter如何在Canvas中绘制圆角矩形

在Flutter中使用Canvas绘制圆角矩形时，如何正确设置圆角半径和绘制区域？我尝试了drawRRect方法，但发现圆角效果不明显或位置偏移，能否提供具体的代码示例说明如何定义RRect的边界和圆角参数？另外，是否支持为圆角矩形添加渐变填充或边框样式？

2 回复

使用Canvas的drawRRect方法，传入RRect对象即可绘制圆角矩形。RRect通过fromRectAndRadius创建，指定矩形区域和圆角半径。

更多关于Flutter如何在Canvas中绘制圆角矩形的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter的Canvas中绘制圆角矩形，可以使用drawRRect方法。以下是具体实现：

方法一：使用drawRRect

// 在CustomPainter的paint方法中
@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;
    
  final rect = Rect.fromLTWH(50, 50, 200, 100);
  final radius = Radius.circular(12.0);
  final rrect = RRect.fromRectAndRadius(rect, radius);
  
  canvas.drawRRect(rrect, paint);
}

方法二：使用RRect.fromRectAndCorners（自定义各角半径）

final rrect = RRect.fromRectAndCorners(
  Rect.fromLTWH(50, 50, 200, 100),
  topLeft: Radius.circular(15),
  topRight: Radius.circular(5),
  bottomRight: Radius.circular(15),
  bottomLeft: Radius.circular(5),
);

方法三：使用RRect.fromLTRBAndCorners

final rrect = RRect.fromLTRBAndCorners(
  50, 50, 250, 150, // left, top, right, bottom
  topLeft: Radius.circular(10),
  bottomRight: Radius.circular(10),
);

关键参数说明：

  • Rect：定义矩形位置和尺寸
  • Radius：圆角半径，可使用Radius.circular()创建统一圆角，或Radius.elliptical()创建椭圆角
  • Paint：定义绘制样式（颜色、描边等）

绘制描边圆角矩形：

final paint = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.stroke
  ..strokeWidth = 2;

通过组合不同的RRect构造方法和Paint属性，可以灵活创建各种样式的圆角矩形。

回到顶部