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

Question

在flutter中实现gridview非常容易，只需少于30行代码即可完成，如以下链接中所述。

Flutter Gridview sample

运行以上代码片段时，将按预期生成网格 View 。我们未提供任何高度/宽度参数，并且未为网格 child 提到纵横比。

I'm wondering how the height and width of the grid tile is calculated.

Does this have any default aspect ratio ?

任何帮助表示赞赏。

Answer 1

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

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

容器小部件正在填充可用空间，因为未指定其height和width属性。 GridView.count填充设置为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，因此高度和宽度都等于屏幕宽度的一半。它比文档中的示例更简单。