Чтобы разметить сетку во Flutter, вы можете использовать несколько методов. Ниже я приведу несколько примеров:
- Виджет GridView:
ВиджетGridView— это универсальный вариант создания сеток. Он позволяет вам определить количество столбцов, расстояние между поперечными и главными осями. Вот пример:
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
Container(color: Colors.yellow),
],
)
- GridView.builder():
КонструкторGridView.builder()полезен, когда у вас большое количество элементов или когда элементы необходимо генерировать динамически. Он использует функцию компоновщика для ленивой генерации элементов по мере того, как они становятся видимыми на экране. Вот пример:
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: 10, // Replace with your actual item count
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.purple,
child: Center(
child: Text('Item $index'),
),
);
},
)
- Виджет переноса:
ВиджетWrapможно использовать, если вы хотите, чтобы элементы переносились на следующую строку, когда недостаточно горизонтального пространства. Он подходит для создания сеток с элементами разного размера. Вот пример:
Wrap(
spacing: 10,
runSpacing: 10,
children: <Widget>[
Container(width: 100, height: 100, color: Colors.red),
Container(width: 150, height: 150, color: Colors.green),
Container(width: 120, height: 120, color: Colors.blue),
Container(width: 80, height: 80, color: Colors.yellow),
],
)
Это всего лишь несколько примеров того, как можно расположить сетку во Flutter. Вы можете изучить дополнительные параметры и настройки, обратившись к документации Flutter.