🧩GridView()

Что такое GridView

GridView — это виджет в Flutter, который используется для отображения элементов в виде сетки. Это похоже на витрину магазина, где товары выставлены в ряды и столбцы. Вы можете использовать GridView для показа изображений, карточек или других виджетов в аккуратной, упорядоченной форме.

Пример использования

Вот простой пример того, как использовать GridView в приложении:

import 'package:flutter/material.dart';

class GridViewExample extends StatelessWidget {
  const GridViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GridView Example')),
      body: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,// Количество столбцов
        children: <Widget>[
          Container(color: Colors.red, height: 100),
          Container(color: Colors.green, height: 100),
          Container(color: Colors.blue, height: 100),
          Container(color: Colors.yellow, height: 100),
          Container(color: Colors.orange, height: 100),
          Container(color: Colors.purple, height: 100),
          Container(color: Colors.pink, height: 100),
          Container(color: Colors.teal, height: 100),
          Container(color: Colors.brown, height: 100),
          Container(color: Colors.amber, height: 100),
          Container(color: Colors.indigo, height: 100),
          Container(color: Colors.lime, height: 100),
        ],
      ),
    );
  }
}

Как работает код

  1. GridView.count — это метод, который создаёт GridView с фиксированным количеством столбцов.

  2. crossAxisCount — задаёт количество столбцов в сетке (в данном случае 2).

  3. children — это список элементов, которые будут отображены в сетке. В примере используются контейнеры разных цветов.

  4. Когда приложение запускается, Flutter показывает сетку из контейнеров, которая автоматически подстраивается под размер экрана.

Зачем это нужно

GridView полезен в следующих случаях:

  • Упорядоченный показ: Когда у вас есть множество элементов, которые нужно организовать в виде сетки.

  • Оптимизация пространства: Сеточная структура позволяет более эффективно использовать экранное пространство, особенно на устройствах с большим экраном.

  • Гибкость: Вы можете настроить количество столбцов и строк, а также их размеры в зависимости от ваших нужд.

Все настройки GridView

  1. Key? key

    • Описание: Уникальный ключ для виджета, который помогает Flutter отслеживать изменения в виджетах, полезен при работе с динамическими данными.

    • Пример:

      key: ValueKey('myGridView') // Уникальный ключ для GridView

  2. Axis scrollDirection = Axis.vertical

    • Описание: Указывает направление прокрутки. По умолчанию вертикально, но можно задать горизонтально.

    • Пример:

      scrollDirection: Axis.horizontal // Прокрутка по горизонтали

  3. bool reverse = false

    • Описание: Если true, сетка будет прокручиваться в обратном направлении, начиная с конца.

    • Пример:

      reverse: true // Прокрутка в обратном направлении

  4. ScrollController? controller

    • Описание: Позволяет управлять прокруткой GridView с помощью контроллера.

    • Пример:

      controller: ScrollController() // Используем контроллер для управления прокруткой

  5. bool? primary

    • Описание: Указывает, является ли GridView основным элементом прокрутки. Обычно используется в рамках других прокручиваемых виджетов.

    • Пример:

      primary: true // Указывает, что это основной элемент прокрутки

  6. ScrollPhysics? physics

    • Описание: Позволяет настроить поведение прокрутки (например, эффект пружины).

    • Пример:

      physics: BouncingScrollPhysics() // Прокрутка с эффектом пружины

  7. bool shrinkWrap = false

    • Описание: Если true, GridView будет занимать только столько места, сколько необходимо для отображения элементов, а не расширяться на весь экран.

    • Пример:

      shrinkWrap: true // Занимает только необходимое пространство

  8. EdgeInsetsGeometry? padding

    • Описание: Указывает отступы вокруг содержимого сетки.

    • Пример:

      padding: EdgeInsets.all(8.0) // Отступы со всех сторон

  9. required SliverGridDelegate gridDelegate

    • Описание: Определяет, как сетка будет организована, включая количество столбцов и размер ячеек.

    • Пример:

      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3, // Количество столбцов
  childAspectRatio: 1.0, // Соотношение ширины и высоты ячеек
)

  10. bool addAutomaticKeepAlives = true

    • Описание: Если true, элементы сетки будут сохраняться в памяти, чтобы не терять состояние при прокрутке.

    • Пример:

      addAutomaticKeepAlives: false // Отключает автоматическое сохранение состояния

  11. bool addRepaintBoundaries = true

    • Описание: Если true, виджеты будут перерисовываться только тогда, когда это необходимо, что помогает улучшить производительность.

    • Пример:

      addRepaintBoundaries: false // Отключает добавление границ для перерисовки

  12. bool addSemanticIndexes = true

    • Описание: Если true, автоматически добавляет семантические индексы для улучшения доступности.

    • Пример:

      addSemanticIndexes: false // Отключает автоматическое добавление семантических индексов

  13. double? cacheExtent

    • Описание: Указывает, сколько места в пикселях следует кэшировать за пределами видимой области сетки.

    • Пример:

      cacheExtent: 200.0 // Кэширует 200 пикселей за пределами видимой области

  14. List<Widget> children = const <Widget>[]

    • Описание: Список виджетов, которые будут отображаться в GridView.

    • Пример:

      children: <Widget>[
  Container(color: Colors.red, height: 100),
  Container(color: Colors.green, height: 100),
] // Список элементов

  15. int? semanticChildCount

    • Описание: Позволяет указать количество семантических детей для улучшения доступности.

    • Пример:

      semanticChildCount: 5 // Указывает количество семантических детей

  16. DragStartBehavior dragStartBehavior = DragStartBehavior.start

    • Описание: Определяет поведение начала перетаскивания (в начале или в середине элемента).

    • Пример:

      dragStartBehavior: DragStartBehavior.down // Начало перетаскивания в середине элемента

  17. Clip clipBehavior = Clip.hardEdge

    • Описание: Определяет, как обрезать содержимое, которое выходит за пределы виджета.

    • Пример:

      clipBehavior: Clip.antiAlias // Обрезает с эффектом сглаживания

  18. ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual

    • Описание: Определяет поведение при закрытии клавиатуры (например, вручную или автоматически).

    • Пример:

      keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag // Закрытие клавиатуры при перетаскивании

  19. String? restorationId

    • Описание: Идентификатор для восстановления состояния при изменениях в приложении.

    • Пример:

      restorationId: 'myGridView' // Идентификатор для восстановления состояния

  20. HitTestBehavior hitTestBehavior = HitTestBehavior.opaque

    • Описание: Определяет, как обрабатывать события касания. Например, opaque позволяет элементам реагировать на касания, даже если они прозрачные.

    • Пример:

      hitTestBehavior: HitTestBehavior.translucent // Позволяет реагировать на касания, если элемент полупрозрачный

Итог

GridView — это отличный инструмент для создания сеток в Flutter. Он прост в использовании и настраивается для различных сценариев. С помощью настроек GridView вы можете точно контролировать поведение, внешний вид и производительность вашей сетки, что обеспечивает хороший пользовательский опыт.

PreviousListView.builder()NextGridView.builder()

Last updated