时间戳

首页 > 解决方案 > Flutter GridView 子项的默认高度和宽度是如何计算的？

flutter - Flutter GridView 子项的默认高度和宽度是如何计算的？

问题描述

在 Flutter 中实现 gridview 非常简单，只需不到 30 行代码就可以完成，如下面的链接所述。

Flutter Gridview 示例

运行上述代码段时，会按预期生成网格视图。我们没有提供任何高度/宽度参数，也没有提到网格子项的纵横比。

我想知道如何计算网格图块的高度和宽度。

这有任何默认纵横比吗？

任何帮助表示赞赏。

标签： fluttergridviewdartflutter-layout

解决方案

这是 GridView 文档中示例的描述：

https://api.flutter.dev/flutter/widgets/GridView-class.html

容器小部件正在填充可用空间，因为未指定它们的高度和宽度属性。GridView.count padding 设置为 20，因此容器外有 20 px 的空间。GridView.count crossAxisSpacing 和 mainAxisSpacing 设置为 10，所以容器之间有 10 px 的空间。GridView.count 还具有 AspectRatio 属性，默认为 1.0，因此容器的高度和宽度相等，使其成为正方形。每个容器内边距设置为 8，因此每个容器中的文本距离容器边缘 8 像素。

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('He\'d have you all unravel at the'),
      color: Colors.teal[100],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Heed not the rabble'),
      color: Colors.teal[200],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Sound of screams but the'),
      color: Colors.teal[300],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Who scream'),
      color: Colors.teal[400],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution is coming...'),
      color: Colors.teal[500],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution, they...'),
      color: Colors.teal[600],
    ),
  ],
)

在链接中的示例中，有彼此相邻的中心小部件，并且它们内部有文本小部件。由于 AspectRatio 为 1.0，因此高度和宽度都等于屏幕宽度的一半。它比文档中的示例更简单。

推荐阅读