Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

GridView

This page has not been translated into English yet. The Russian original is below.

Прокручиваемая сетка с фиксированным числом колонок. Как и ListView , бывает в двух формах: GridView — ячейки перечислены в разметке, GridView.builder — ячейки строятся по шаблону @Macros id:itemBuilder .

Тип: multi-child ( GridView ), multi-child с макросом-шаблоном ( GridView.builder )

SizedBox height:240
  GridView crossAxisCount:2 mainAxisSpacing:8 crossAxisSpacing:8
    ColoredBox color:#4f46e5
    ColoredBox color:#7c3aed
    ColoredBox color:#059669
    ColoredBox color:#dc2626

Параметры

Параметр	Тип	Default	Описание
`crossAxisCount`	int	2	Число колонок (при горизонтальной прокрутке — рядов)
`mainAxisSpacing`	double	0	Промежуток между рядами
`crossAxisSpacing`	double	0	Промежуток между колонками
`childAspectRatio`	double	1.0	Ширина ÷ высота ячейки: по умолчанию ячейки квадратные
`scrollDirection`	string	vertical	`vertical` , `horizontal`
`reverse`	bool	false	Начинать с конца
`shrinkWrap`	bool	false	Занимать место по содержимому
`physics`	string	always	`never` , `bouncing` , `clamp` , `always`
`clipBehavior`	string	hardEdge	Обрезка по границам

Только у GridView.builder :

Параметр	Тип	Default	Описание
`itemCount`	int	—	Сколько ячеек построить

Ячейки одинаковые по размеру: ширина колонки делится поровну, высота выводится из childAspectRatio . Ячеек разной высоты этот элемент не делает.

Вложенные структуры

`#padding`

Отступ вокруг всей сетки внутри области прокрутки.

SizedBox height:200
  GridView crossAxisCount:3 mainAxisSpacing:4 crossAxisSpacing:4
    #padding all 8
    ColoredBox color:#4f46e5
    ColoredBox color:#7c3aed
    ColoredBox color:#059669

Дочерние элементы

В GridView.builder ребёнок — макрос @Macros id:itemBuilder ; параметр index ( index:0 в объявлении) получает номер ячейки.

SizedBox height:300
  GridView.builder crossAxisCount:3 itemCount:9 mainAxisSpacing:8 crossAxisSpacing:8
    @Macros id:itemBuilder index:0
      ColoredBox color:#4f46e5
        Center
          Text $"№${index}"

Сетка из данных

Макрос получает только index ; поля достают индексом на месте вызова, с ?? :

JsonData src:"data/products.json" data:@products count:@count
  SizedBox height:400
    GridView.builder crossAxisCount:2 itemCount:$count mainAxisSpacing:8 crossAxisSpacing:8
      @Macros id:itemBuilder index:0
        DecoratedBox
          #decoration color:#36345E
            #borderRadius circular 12
          Center
            Text {products[index]['title'] ?? ""}

Примеры

Плитки 16:9

SizedBox height:260
  GridView crossAxisCount:2 childAspectRatio:1.78 mainAxisSpacing:8 crossAxisSpacing:8
    ColoredBox color:#4f46e5
    ColoredBox color:#7c3aed
    ColoredBox color:#059669
    ColoredBox color:#dc2626

Различия между приложением и сайтом

На сайте сетка — это CSS-сетка с crossAxisCount равными колонками, и она не прокручивается сама : она занимает место по содержимому, а если родитель ограничил высоту, лишнее обрезается. Поэтому:

scrollDirection , reverse , physics , shrinkWrap на сайте не читаются, #padding — тоже;
mainAxisSpacing , crossAxisSpacing , childAspectRatio , crossAxisCount работают.

Для сайта не задавайте сетке фиксированную высоту, если рассчитываете на прокрутку внутри неё — пусть прокручивается страница.

Bad practices

Сетка без ограниченной высоты

// BAD — внутри Column сетка получает бесконечную высоту: в приложении это ошибка раскладки
Column
  Text "Заголовок"
  GridView crossAxisCount:2
    ColoredBox color:#4f46e5
    ColoredBox color:#7c3aed

// GOOD
Column
  Text "Заголовок"
  Expanded
    GridView crossAxisCount:2
      ColoredBox color:#4f46e5
      ColoredBox color:#7c3aed