Flutter 颤振-如何删除GridView下的边距？

我的

网格视图下有一个奇怪的边距：


这张图片来自一个IOS模拟器，下面是它在安卓系统上较小屏幕上的外观，屏幕上的空白似乎消失了，或者缩小了很多：


代码如下：

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)
      )
    );
  }
}

我真的搞不清楚这个边距是什么或者它来自哪里，它是否与
包覆膜收缩术
或者其他什么有关

如何删除此页边距

编辑：

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

IOS：


安卓：

您体验到的布局差异来自于以下因素的组合：


GridView
如何管理其大小
小部件如何放置在
列中


GridView分幅和大小
构建
GridView
时，其宽度和高度将根据
crossAxisCount
参数及其父级给定的约束隐式推导

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

crossAxisCount
定义了一行（行或列）中应容纳多少个磁贴。根据其
滚动方向
，它将尝试填充所有可用的宽度或高度。默认情况下，此方向设置为轴垂直，这意味着宽度将被填充

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

一旦Flatter知道每个瓷砖的大小，它就会在每行上设置它们，直到所有瓷砖都放置好或者没有任何可用空间为止

列布局
现在我们了解了更多关于
GridView
，我们需要了解
列如何构建其布局

列为每个小部件的子部件分配空间，如下所示

tl；博士：
您的
GridView
只会在
列中填充自己的高度，剩下的部分作为可用空间。这就是为什么列中会出现空白

可能的解决办法
我真的不明白这是个什么问题。GridView应该只扩展以显示它们的子对象，所以当它完成时停止是完全有意义的

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

如果您只希望有一行平铺，这将使用可用空间进行扩展，那么可以使用一个简单的行

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

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

您可能需要重新考虑布局，以便玩家面板与游戏板位于相同的
列中。这样您可以更好地控制布局。
试试这个。默认情况下，它有填充，您应该将填充设置为零

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

它似乎是整个屏幕的一部分。你能发布android和iOS的全屏图像吗？@HarshvardhanJoshi添加了它们。我不会为完整的示例添加代码，因为它非常多，并且不会给问题添加任何内容，因为它仍然只在简单的
Text
小部件中出现。我希望这能增加一些清晰度。谢谢你的回答，我现在有点了解问题所在。播放器面板在同一列中，只是从简化示例中排除。如果使用单个
行
，如何控制磁贴大小？瓷砖需要水平填充可用空间，然后获得与其宽度相同的高度，因为
GridView
会自动处理此问题，我不确定如何以最有效的方式实现这一点。任何指针？您可以尝试
mainAxisAlignment:mainAxisAlignment.space，
在主
列中
您可能可以尝试将播放器面板包装在灵活的小部件中，这样它们将占用所有可用空间。如果您不想让播放器面板扩展到布局的顶部和底部，您也可以在列的顶部和底部添加填充小部件。@HarshvardhanJoshi不幸地使情况变得更糟：PI认为这需要一些尝试和错误才能获得想要的结果。。谢谢你让我知道顺便说一句