Как рассчитываются высота и ширина по умолчанию для дочерних элементов Flutter GridView?

Question

Реализация gridview во флаттере настолько проста, что это может быть сделано менее чем с 30 строками кода, как объяснено в ссылке ниже.

Образец Flutter Gridview

При запуске приведенного выше фрагмента генерируется вид сетки, как и ожидалось. Мы не предоставляем никаких параметров высота / ширина, а также соотношение сторон не упоминается для дочерних элементов сетки.

Мне интересно, как рассчитывается высота и ширина плитки сетки.

Имеется ли у этого соотношение сторон по умолчанию?

Любая помощь приветствуется.

Answer 1

Это пример для примера в документации GridView:

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

Контейнерные виджеты заполняют доступное пространство, так как их свойства высоты и ширины не указано. Для заполнения GridView.count установлено значение 20, поэтому пространство вне контейнера составляет 20 пикселей. Для 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, высота и ширина равны половине ширины экрана. Это проще, чем пример в документации.