如何在CustomPainter绘制的矩形之间添加间距或内边距？

数据老陈

2026-9-26

解决方案

问题根因

原有代码的核心问题是X轴定位逻辑错误：每个矩形的水平中心仅相差1px，但矩形本身宽度就达15px，因此矩形会完全重叠，自然看不到间隔。同时sample.indexOf(i)的写法存在bug，当列表内有重复数值时会获取到错误的索引，导致绘制位置异常。

优化方案

我们可以通过新增可调参数、重构定位逻辑实现间距和内边距的控制：

新增可配置参数：rectWidth控制矩形宽度、spacing控制矩形间的间距、horizontalPadding控制整体绘制区域的左右内边距
改用带索引的循环遍历，避免重复值导致的索引错误
重新计算每个矩形的X轴位置：第i个矩形的中心X坐标 = 左侧内边距 + i * (矩形宽度 + 间距) + 矩形宽度/2，保证相邻矩形间隔符合预期

修改后完整代码

import 'package:flutter/material.dart';

class RectPath extends CustomPainter {
  final List<double> sample;
  // 可自行调整以下参数修改样式
  final double rectWidth = 15; // 矩形宽度
  final double spacing = 8; // 矩形之间的间距
  final double horizontalPadding = 12; // 整体左右内边距

  RectPath(this.sample);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.lightGreen;
    // 改用带索引的循环，避免indexOf的bug
    for (int i = 0; i < sample.length; i++) {
      double value = sample[i];
      // 重新计算X轴中心坐标
      double centerX = horizontalPadding + i * (rectWidth + spacing) + rectWidth / 2;
      canvas.drawRect(
          Rect.fromCenter(
              center: Offset(centerX, 25.0), 
              width: rectWidth, 
              height: value * 0.8
          ),
          paint,
      );
    }
  }

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