🧩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 вы можете точно контролировать поведение, внешний вид и производительность вашей сетки, что обеспечивает хороший пользовательский опыт.