Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

GridView

Прокручиваемая сетка с фиксированным числом колонок. Как и 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