Flutter GridView设EdgeInsets.zero仍偶现padding问题求助

我在制作一个包含9个方块的简单GridView，已将padding设置为EdgeInsets.zero，但有时会根据窗口尺寸出现多余的间隙，有时又正常。在Chrome、Fedora Plasma和Fedora i3wm环境测试，该问题稳定复现——仅轻微调整窗口大小，就会在「有间隙」和「无间隙」两种状态间切换。

相关代码 #

import 'package:flutter/material.dart';

void main(){
    runApp(MaterialApp(home: myApp));
}

// 展示9个方块
Widget myApp = GridView.count(
    crossAxisCount: 3,
    padding: EdgeInsets.zero,
    children: [
        Square(),
        Square(),
        Square(),
        Square(),
        Square(),
        Square(),
        Square(),
        Square(),
        Square(),
    ],
);

// 简单的红色方块
class Square extends StatelessWidget {
    Color color = Colors.red;
    Square({super.key});

    @override
    Widget build(BuildContext context){
        return Container(
            color: color,
            padding: EdgeInsets.zero,
        );
    }
}

问题原因 #

这是因为GridView计算子元素尺寸时，若窗口宽度无法被crossAxisCount整除，浮点计算精度问题或默认布局逻辑会导致细微间隙；另外默认childAspectRatio=1.0，但父容器尺寸非严格3的倍数时，子元素尺寸会出现小数，渲染后产生视觉间隙。

解决方法 #

• 强制子元素填充单元格
  给Square的Container添加width: double.infinity和height: double.infinity，让子元素完全填充分配的空间：

  class Square extends StatelessWidget {
      Color color = Colors.red;
      Square({super.key});
  
      @override
      Widget build(BuildContext context){
          return Container(
              color: color,
              width: double.infinity,
              height: double.infinity,
              padding: EdgeInsets.zero,
          );
      }
  }
  

• 显式设置间距并配合shrinkWrap
  明确设置crossAxisSpacing和mainAxisSpacing为0，若需GridView自适应高度可加上shrinkWrap: true：

  Widget myApp = GridView.count(
      crossAxisCount: 3,
      padding: EdgeInsets.zero,
      crossAxisSpacing: 0,
      mainAxisSpacing: 0,
      shrinkWrap: true,
      children: [
          Square(),
          Square(),
          Square(),
          Square(),
          Square(),
          Square(),
          Square(),
          Square(),
          Square(),
      ],
  );
  

• 精确计算子元素尺寸
  通过LayoutBuilder获取容器宽度，手动计算每个方块的尺寸，避免浮点误差：

  Widget myApp = LayoutBuilder(
      builder: (context, constraints) {
          final itemSize = constraints.maxWidth / 3;
          return GridView.builder(
              padding: EdgeInsets.zero,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 0,
                  mainAxisSpacing: 0,
                  childAspectRatio: 1.0,
                  mainAxisExtent: itemSize,
              ),
              itemCount: 9,
              itemBuilder: (context, index) => Square(),
          );
      },
  );
  

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