Класс SliverGridDelegateWithFixedCrossAxisCount

Класс SliverGridDelegateWithFixedCrossAxisCount передают в gridDelegate у GridView и SliverGrid. Поле crossAxisCount задаёт число колонок, mainAxisSpacing и crossAxisSpacing - зазоры между ячейками, childAspectRatio - форму ячейки.

Синтаксис

SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2)

Параметры

Параметр	Описание
`crossAxisCount`	Сколько ячеек стоит в поперечном направлении.
`mainAxisSpacing`	Промежуток между ячейками вдоль прокрутки.
`crossAxisSpacing`	Промежуток между ячейками поперёк прокрутки.
`childAspectRatio`	Отношение ширины ячейки к её высоте.

Пример

Давайте построим сетку с двумя колонками:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: GridView(
					gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
						crossAxisCount: 2,
					),
					children: [
						Center(child: Text('abcde')),
						Center(child: Text('12345')),
					],
				),
			),
		),
	);
}

На экране две ячейки в ряд одинаковой ширины.

Пример

Давайте увеличим зазор между рядами:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: GridView(
					gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
						crossAxisCount: 2,
						mainAxisSpacing: 16,
					),
					children: List.generate(
						4,
						(i) => Center(child: Text('abcde')),
					),
				),
			),
		),
	);
}

На экране между рядами появится вертикальный зазор.

Смотрите также

метод custom,
который часто ставят рядом в прокручиваемых экранах
класс SliverGridDelegateWithMaxCrossAxisExtent,
который дополняет работу с прокруткой
метод builder,
который помогает собрать сложный список
виджет SingleChildScrollView,
который задаёт поведение или данные прокрутки