Flutter GridView 渲染组件出现随机间隙，求解决方法

问题原因 #

这些灰色间隙是浮点精度计算误差导致的：

• GridView.count会根据当前可用窗口宽度和设置的crossAxisCount自动计算每个子项的宽度。当窗口宽度无法被crossAxisCount整除时，每个子项的宽度会是一个带小数的像素值。
• Flutter渲染引擎处理非整数像素时，会通过抗锯齿算法填充边缘，这就会露出Scaffold的背景色（Colors.grey[200]），看起来像是随机间隙。窗口大小变化时，计算出的小数像素情况改变，间隙的位置和数量也会随之变化。

解决方法 #

这里提供几种可行的消除间隙的方案：

方案1：让子项尺寸强制对齐整数像素 #

通过LayoutBuilder获取父容器的可用宽度，手动计算出每个子项的整数宽度，再约束GridView的尺寸：

class Test extends StatelessWidget {
  const Test();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: LayoutBuilder(
        builder: (context, constraints) {
          const crossAxisCount = 7;
          final itemWidth = (constraints.maxWidth ~/ crossAxisCount).toDouble();
          return GridView.count(
            crossAxisCount: crossAxisCount,
            childAspectRatio: 1.0, // 保证子项是正方形
            children: List.generate(49, (index) {
              return Container(
                width: itemWidth,
                height: itemWidth,
                color: Colors.black,
              );
            }),
          );
        },
      ),
    );
  }
}

方案2：简化子项布局，避免额外渲染层级 #

去掉子项中多余的width/height设置，直接用color属性替代BoxDecoration，减少渲染时的精度偏差：

GridView.count(
  crossAxisCount: 7,
  childAspectRatio: 1.0,
  children: List.generate(49, (index) {
    return Container(
      color: Colors.black, // 直接设置颜色，而非通过BoxDecoration
    );
  }),
)

方案3：使用自定义SliverGridDelegate强制整数尺寸 #

通过自定义SliverGridDelegate，确保每个子项的尺寸都是整数像素：

class IntegerSliverGridDelegate extends SliverGridDelegateWithFixedCrossAxisCount {
  const IntegerSliverGridDelegate({
    required super.crossAxisCount,
    super.mainAxisSpacing = 0,
    super.crossAxisSpacing = 0,
    super.childAspectRatio = 1,
  });

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final layout = super.getLayout(constraints);
    final crossAxisExtent = layout.crossAxisExtent.floorToDouble();
    return SliverGridRegularTileLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: crossAxisExtent * childAspectRatio,
      crossAxisStride: crossAxisExtent,
      childMainAxisExtent: crossAxisExtent * childAspectRatio,
      childCrossAxisExtent: crossAxisExtent,
    );
  }
}

// 使用方式
GridView.builder(
  gridDelegate: const IntegerSliverGridDelegate(crossAxisCount: 7),
  itemCount: 49,
  itemBuilder: (context, index) => Container(color: Colors.black),
)

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