如何在自定义画家中添加矩形之间的空格/填充

Question

我有一个自定义的painter类，它使用从示例列表中获得的数据绘制矩形。现在它绘制时中间没有空格。如何在它们之间添加间距或填充？

这是代码

class RectPath extends CustomPainter {
final List<double> sample;
RectPath(this.sample);
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.lightGreen;
for (var i in sample) {
canvas.drawRect(
Rect.fromCenter(
center: Offset(sample.indexOf(i) + 0.0, 25.0), width: 15, height: i * 0.8),
paint);

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

Answer 1

与其在样本列表的索引中添加0.0，不如将其索引与条形图的宽度和之间的间距相乘

在你的情况下，条形宽度是15，我想要5的间隙，所以我会做索引*15+5，如下所示

class RectPath extends CustomPainter {
final List<double> sample;
RectPath(this.sample);
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.lightGreen;
for (var i in sample) {
canvas.drawRect(
Rect.fromCenter(
center: Offset(sample.indexOf(i) * 15+5, 25.0), width: 15, height: i * 0.8),
paint);

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