Виджет GridView
Виджет GridView показывает дочерние виджеты в ячейках сетки.
Готовые ячейки передают в children, а длинную сетку удобнее
собирать через builder.
Число колонок задают count
или extent.
Прокруткой управляет ScrollController в controller.
Синтаксис
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [Text('abcde'), Text('12345')],
)
Параметры
| Параметр | Описание |
|---|---|
gridDelegate |
Как делить место на ячейки. Принимает SliverGridDelegateWithFixedCrossAxisCount или SliverGridDelegateWithMaxCrossAxisExtent.
|
children |
Список виджетов ячеек для обычного конструктора. |
controller |
ScrollController для программной прокрутки.
|
physics |
ScrollPhysics для жеста прокрутки.
|
scrollDirection |
Ось прокрутки: вертикаль или горизонталь. |
Методы
| Метод | Описание |
|---|---|
count |
GridView. Давайте разберём вызов на примерах.
|
extent |
GridView. Давайте разберём вызов на примерах.
|
builder |
Ячейка по индексу, когда она попадает на экран. |
custom |
GridView. Давайте разберём вызов на примерах.
|
Пример
Давайте выведем четыре ячейки в две колонки:
import 'package:flutter/material.dart';
void main()
{
runApp(
MaterialApp(
home: Scaffold(
body: GridView.count(
crossAxisCount: 2,
children: List.generate(
4,
(i) => Card(child: Center(child: Text('abcde'))),
),
),
),
),
);
}
На экране четыре карточки в две колонки, лишние уедут вниз при прокрутке.
Пример
Давайте прокрутим длинную сетку через builder:
import 'package:flutter/material.dart';
void main()
{
runApp(
MaterialApp(
home: Scaffold(
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemCount: 30,
itemBuilder: (BuildContext context, int index)
{
return Center(child: Text('12345'));
},
),
),
),
);
}
На экране видны первые ячейки, остальные появятся при прокрутке.
