Flutter开发数独应用时GridView出现白色线条求助

以下是针对你遇到的GridView白色线条问题的几种可行解决办法：

1. 处理像素精度问题 #

当屏幕宽度无法被crossAxisCount（这里是9）整除时，每个单元格的宽度会是小数像素，渲染时就会出现细微的白色缝隙。可以手动计算并设置整数尺寸：

GridView.builder(
  itemCount: gameFields.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 9,
    // 计算每个item的宽高比，取整避免小数像素
    childAspectRatio: (MediaQuery.of(context).size.width.floor() / 9) / (MediaQuery.of(context).size.width.floor() / 9),
  ),
  itemBuilder: (context, index) => Container(
    color: Colors.lightGreen,
    child: Center(
      child: Text("${index + 1}"),
    ),
  ),
);

或者直接固定item的宽高为整数：

GridView.builder(
  itemCount: gameFields.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 9,
  ),
  itemBuilder: (context, index) {
    final itemSize = (MediaQuery.of(context).size.width / 9).floor().toDouble();
    return SizedBox(
      width: itemSize,
      height: itemSize,
      child: Container(
        color: Colors.lightGreen,
        child: Center(
          child: Text("${index + 1}"),
        ),
      ),
    );
  },
);

2. 统一背景色并消除默认间距 #

确保GridView的背景色和item的背景色一致，同时显式设置间距为0：

Container(
  color: Colors.lightGreen,
  child: GridView.builder(
    itemCount: gameFields.length,
    padding: EdgeInsets.zero,
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 9,
      mainAxisSpacing: 0,
      crossAxisSpacing: 0,
    ),
    itemBuilder: (context, index) => Container(
      color: Colors.lightGreen,
      child: Center(
        child: Text("${index + 1}"),
      ),
    ),
  ),
);

3. 使用BoxDecoration替代直接设置color #

有时候直接设置Container的color会和渲染层产生冲突，改用BoxDecoration可以解决：

GridView.builder(
  itemCount: gameFields.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 9,
  ),
  itemBuilder: (context, index) => Container(
    decoration: const BoxDecoration(
      color: Colors.lightGreen,
    ),
    child: Center(
      child: Text("${index + 1}"),
    ),
  ),
);

4. 关闭抗锯齿（极端情况） #

如果以上方法都无效，可以尝试关闭item的抗锯齿：

GridView.builder(
  itemCount: gameFields.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 9,
  ),
  itemBuilder: (context, index) => Container(
    color: Colors.lightGreen,
    child: Center(
      child: Text("${index + 1}"),
    ),
  ),
  clipBehavior: Clip.none,
);

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