Flutter：Grid组件内边框绘制问题及修复咨询

方案1：用CustomPaint 绘制全局线条（最推荐） #

放弃用卡片边框拼线条的思路，直接用CustomPaint在Grid布局的上层/下层绘制除法竖式需要的所有线条，这样线条是连续无断点的，完全避免边框衔接问题。

步骤：

• 把Grid和CustomPaint嵌套在Stack中
• 自定义CustomPainter子类，根据Grid的单元格尺寸和布局，计算出横线、竖线的坐标后直接绘制

示例代码：

class DivisionLinePainter extends CustomPainter {
  final double cellSize;
  final int rowCount;
  final int colCount;

  DivisionLinePainter({required this.cellSize, required this.rowCount, required this.colCount});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke;

    // 绘制被除数下方的横线
    canvas.drawLine(
      Offset(cellSize * 1, cellSize * 0.5),
      Offset(cellSize * 3, cellSize * 0.5),
      paint,
    );
    // 绘制除号的竖线
    canvas.drawLine(
      Offset(cellSize * 0.5, 0),
      Offset(cellSize * 0.5, cellSize * 2),
      paint,
    );
    // 根据你的竖式布局，补充其他需要的线条
  }

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

// 布局使用示例
Stack(
  children: [
    GridView.count(
      shrinkWrap: true,
      crossAxisCount: 4,
      childAspectRatio: 1,
      mainAxisSpacing: 0,
      crossAxisSpacing: 0,
      children: List.generate(12, (index) {
        return Container(
          alignment: Alignment.center,
          child: Text('${index+1}'),
        );
      }),
    ),
    CustomPaint(
      size: Size(50 * 4, 50 * 3),
      painter: DivisionLinePainter(cellSize: 50, rowCount: 3, colCount: 4),
    ),
  ],
)

方案2：统一Grid布局与边框设置，消除衔接间隙 #

如果坚持用卡片边框拼线条，需要彻底消除Grid的间距并精准控制每个单元格的边框：

1. 将GridView的mainAxisSpacing和crossAxisSpacing设为0，避免单元格之间的间隙
2. 给每个Container的BoxDecoration设置边框时，只保留需要的边，不需要的边用BorderSide.none，这样相邻单元格的边框会完美衔接

示例代码：

GridView.count(
  shrinkWrap: true,
  crossAxisCount: 4,
  childAspectRatio: 1,
  mainAxisSpacing: 0,
  crossAxisSpacing: 0,
  children: [
    // 除号竖线所在单元格，仅保留左边框
    Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: Colors.black, width: 1),
        ),
      ),
      child: Text(''),
    ),
    // 被除数第一个数字，仅保留下边框
    Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Colors.black, width: 1),
        ),
      ),
      child: Text('6'),
    ),
    // 其他单元格根据竖式布局需求，设置对应方向的边框
    // ...
  ],
)

方案3：替换Card为纯Container，避免默认样式干扰 #

Card组件默认带有margin和elevation，会导致边框位置偏移，换成纯Container自定义样式，能完全控制边框的位置和尺寸，避免衔接错位。

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