Сетка

Виджет GridView используется для отображения списка элементов в виде сетки или двух измерений (вертикально и горизонтально одновременно).

Например, вы можете использовать GridView для отображения списка фотографий или списка товаров.

Чтобы создать простой GridView с некоторыми изображениями:

1. Сначала перетащите виджет GridView с вкладки Элементы макета (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. Теперь добавьте несколько виджетов изображений. Снова перетащите его с вкладки Layout Elements (Элементы макета) или добавьте его непосредственно из дерева виджетов.

Чтобы создать виджет GridView с пользовательскими элементами:

1. Сначала перетащите виджет GridView с вкладки Layout Elements (в панели виджетов).
2. Добавьте виджет Container, перетащив его с той же вкладки Layout Elements или непосредственно из дерева виджетов.
3. Перетащите виджет Column внутрь добавленного контейнера.
4. Добавьте один виджет Image внутри Column. Перейдите в Редактор свойств, прокрутите вниз до раздела Изображение и установите ширину в inf (щелкните на значке) и высоту в 80.
5. Добавьте виджет «Текст«. Измените название на Product и установите Theme Style на Title 1.

На данный момент в список добавлен один элемент. Чтобы заполнить GridView большим количеством элементов, скопируйте-вставьте виджет Container.

Чтобы скопировать-вставить виджет Container:

1. Выберите виджет Container.
2. Щелкните на нем правой кнопкой мыши и выберите Копировать. Вы также можете использовать комбинацию клавиш Ctrl+C или Command+C.
3. Выберите виджет GridView.
4. Щелкните на нем правой кнопкой мыши и выберите Вставить. Вы также можете использовать комбинацию клавиш Ctrl+V или Command+V.

После добавления нескольких элементов GridView выглядит следующим образом:

Возможно, вы захотите показать список элементов из бэкенда. Есть два основных источника, из которых вы можете получить данные.

1. Отображение данных из магазина Firestore
2. Отображение данных из вызова API

Чтобы показать данные из Firestore, создайте коллекцию, сделайте запрос к коллекции, а затем отобразите данные в виджете Image.

Возможно, вы используете собственную инфраструктуру для хранения данных вашего приложения. Данные могут быть получены с помощью вызовов API.

Прежде чем показывать данные, полученные в результате вызова API, убедитесь, что вы выполнили все упомянутые предварительные условия.

1. Будьте знакомы с вызовами API.
2. Добавьте вызовы API в проект FlutterFlow.

После добавления вызова API в FlutterFlow он выглядит следующим образом:

Вызов API позволяет получить ответ (содержащий список элементов) и показать их в GridView.

Чтобы выполнить вызов API на GridView, выполните следующие действия:

• Выберите виджет GridView в дереве виджетов или в области холста.
• Перейдите на вкладку Backend Query (в правой части экрана).
• Установите для параметра Тип запроса значение Вызов API.
• Установите Call Name (Имя вызова) на имя API, которое извлекает данные.
• Нажмите кнопку Сохранить.

Генерация динамических дочерних элементов поможет вам подготовить список элементов, присутствующих в ответе API. Возвращенный результат сохраняется в переменной, которую вы можете использовать для заполнения GridView.

Чтобы создать динамические дочерние элементы:

• Выберите GridView в дереве виджетов или в области холста.
• Перейдите на вкладку Generate Dynamic Children (в правой части экрана).
• Введите соответствующее имя переменной.
• Установите значение Source на [apicall_name] Response (из GridView).
• Установите для параметра Response Options значение JSON Body.
• В разделе Доступные параметры нажмите на Сбросить и выберите Путь JSON.
• Внутри JSON Path введите выражение JSON для получения списка. Как получить JSON Path, смотрите здесь.
• Нажмите Сохранить.

Чтобы показать изображение из URL, хранящегося в переменной.

1. Выберите виджет Image, перейдите на панель свойств, найдите свойство Path и нажмите на текст Set from Variable.
2. Выберите элемент [имя_переменной] из списка. Это должно быть имя переменной, которое вы указали при генерации дочерних элементов из переменной.
3. Установите для параметра Available Options значение JSON Path.
4. Внутри JSON Path введите выражение JSON для получения URL изображения. Как получить JSON Path, смотрите здесь.
5. Нажмите кнопку Подтвердить.

Вот как это выглядит, когда вы запускаете свое приложение:

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

Мы уже рассказывали о том, как добавить бесконечную прокрутку в виджет ListView, что даст вам общее представление о том, как добавить бесконечную прокрутку и в виджет GridView.

Панель свойств можно использовать для настройки поведения виджета GridView.

Ниже приведены инструкции по добавлению отступов.

В приведенном выше примере вы узнали, как добавить элементы, которые прокручиваются вертикально, что является осью по умолчанию для прокрутки списка в GridView.

Чтобы прокрутить элементы по горизонтали:

1. Выберите GridView в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и прокрутите вниз до раздела «Свойства GridView«.
3. Найдите выпадающий список «Ось» и измените его на «Горизонтально«.

Чтобы исправить расположение элементов для горизонтального направления прокрутки, просто увеличьте Height виджета Image и установите его на 200.

Теперь все должно выглядеть следующим образом:

По умолчанию GridView показывает три элемента на поперечной оси. Это означает, что если свойство Axis установлено на Vertical, то GridView будет показывать три элемента по горизонтали. А если Axis изменено на Horizontal, то GridView будет показывать три элемента по вертикали.

Чтобы изменить значение по умолчанию Cross Axis Count:

• Выберите GridView в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства GridView.
• Измените значение поля ввода Cross Axis Count.
• Попробуйте изменить значение выпадающего списка Axis и заметите разницу.

Когда вы добавляете GridView в свой проект FlutterFlow, по умолчанию он добавляет пространство в 10px на поперечной и главной осях. Это означает, что если свойство Axis установлено на Vertical, GridView будет вставлять пустое пространство в 10px по горизонтали и 10px по вертикали между элементами. А если свойство Axis изменить на Horizontal, GridView будет вставлять пустое пространство в 10px по вертикали и 10px по горизонтали между элементами.

Чтобы изменить расстояние между элементами:

• Выберите GridView в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства GridView.
• Измените значение параметра Расстояние между осями.
• Измените значение расстояния между осями.

Иногда вы можете захотеть изменить высоту элемента вместо того, чтобы держать его в квадратном поле. Свойство Child Aspect Ratio в GridView позволяет это сделать. По умолчанию значение для Child Aspect Ratio установлено в 1. Это означает, что высота элемента будет равна ширине элемента на главной оси. Если значение изменится на 2, высота будет уменьшена на 50% в направлении главной оси.

Чтобы изменить высоту элемента:

• Выберите GridView в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства GridView.
• Введите значение в поле ввода Child Aspect Ratio.
• Попробуйте изменить выпадающий параметр Axis и заметите разницу.

По умолчанию виджет GridView занимает все доступное пространство по своей главной оси. Это означает, что если свойство Axis установлено в значение Vertical, то GridView займет все вертикальное пространство на экране. Аналогично, если свойство Axis установлено в Horizontal, то GridView будет занимать все горизонтальное пространство.

Чтобы заставить GridView принимать размер только своих дочерних элементов:

• Выберите GridView в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства GridView.
• Установите флажок Shrink Wrap.

Ниже вы можете видеть, как выделение зеленым цветом для GridView уменьшается, когда установлен флажок Shrink Wrap.

Чтобы включить функцию pull to refresh на этом виджете, вы можете следовать инструкциям здесь.

Посмотрите, как отобразить виджет пустого списка при отсутствии данных.

Узнайте, как прокрутить список в начало или конец нажатием кнопки.

Инструкции по отображению/скрытию виджета находятся здесь.