Flutter - 如何在 GridView 下删除边距？

Question

我的GridView 下有一个奇怪的边距：

此图像来自 IOS 模拟器，以下是它在 Android 上的较小屏幕上的外观，其中边距似乎消失或变小了很多：

代码如下：

Column(
  children: [
     GridView.count(
       shrinkWrap: true,
       crossAxisCount: 8,
       children: tiles
     ),
     Text('mamma')
  ]
)

网格中的每个元素 (tiles) 都是一个 EmptyTile 小部件：

class EmptyTile extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        border: Border.all(color: borderColor)
      )
    );
  }
}

我真的无法弄清楚这个边距是什么或它来自哪里，是否与shrinkWrap 或其他什么有关。

我怎样才能去掉这个边距？

编辑：

根据要求，这里是没有简化示例的全屏图像。

IOS：

安卓：

Answer 1

试试这个。默认情况下它有填充，你应该将填充设置为零。

 GridView.builder(
   padding: EdgeInsets.all(0),

Answer 2

您体验到的布局差异来自多种因素：

• GridView 如何管理其大小。
• 小部件如何放置在Column 中。

GridView 磁贴和大小

当您构建一个GridView 时，它的宽度和高度是从crossAxisCount 参数及其父级给出的约束中隐式推导出来的。

约束是允许小部件绘制的大小限制。

crossAxisCount 定义一行（行或列）中应容纳多少个图块。根据其scrollDirection，它将尝试填充所有可用的宽度或高度。默认情况下这个方向设置为Axis.vertical，表示宽度会被填充。

所以当我们回到您的示例时，这意味着每个图块的大小将取决于包含您的网格的Column 的宽度除以您在crossAxisCount 中设置的图块数量。此大小将是您的GridView 中每个图块的宽度和高度。

一旦 Flutter 知道了每个图块的大小，它就会将它们设置在每一行上，直到所有图块都放置好或没有任何可用空间。

列布局

既然我们对GridView 有了更多了解，我们需要了解Column 是如何构建其布局的。

Columns 为其子级中的每个小部件分配空间，紧随an algorithm best describes in the docs。

tl;博士： 您的GridView 只会在Column 中填充自己的高度，其余部分作为空闲空间。这就是为什么您的列中有空白空间。

可能的修复

我真的不明白这是怎么回事。 GridView 应该只扩展以显示它们的子视图，因此它在完成时停止是完全有意义的。

问题是，大多数情况下，这种网格不用于有限的子列表，而更可能用于不断增长的列表。

如果您只想拥有一行瓷砖，它将使用可用空间进行扩展，您可以使用简单的行。

如果您想要多行瓷砖，使用非方形瓷砖，您需要深入了解GridView.custom。

使用更多屏幕截图更新问题后编辑：

您可能需要重新考虑布局，以便玩家面板与游戏板位于相同的Column 中。通过这种方式，您可以更好地控制布局。