Виджет StaggeredView отображает список элементов в виде ступенчатой сетки.

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

пере 1

Добавление StaggeredView

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

  • Сначала перетащите виджет StaggeredView с вкладки Layout Elements (в панели виджетов) или добавьте его
  • Теперь добавьте несколько виджетов Image. Снова перетащите их с вкладки Layout Elements или добавьте непосредственно из дерева виджетов. Примечание: Чтобы увидеть эффект ступенчатого вида, попробуйте
  • удалить высоту всех изображений или задать разную высоту каждому изображению.
шах 1

Включить функцию «Потянуть за обновление

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

Показ данных из бэкенда

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

  1. Показывать данные из Firestore
  2. Показывать данные из вызова API

Отображение данных из Firestore

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

шах 2
шах 3

Отображение данных из вызова API

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

шах 4

Отображение данных из вызовов API включает в себя следующие шаги:

  1. Предварительные условия
  2. Выполнение вызова API на StaggeredView
  3. Генерация динамических дочерних элементов
  4. Отображение данных в элементах пользовательского интерфейса

Предварительные условия

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

  1. Будьте знакомы с вызовами API.
  2. Добавьте вызовы API в проект FlutterFlow.
Если вы еще не настроили вызовы API на стороне бэкенда, вы можете использовать любой открытый API, чтобы опробовать его. Возможно, вы можете попробовать это https://picsum.photos/v2/list

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

шах 5

Генерация динамических дочерних элементов

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

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

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

Выполнение вызова API на StaggeredView

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

Чтобы выполнить вызов API на StaggeredView:

  1. Выберите виджет StaggeredView в дереве виджетов или в области холста.
  2. Перейдите на вкладку Backend Query (в правой части экрана).
  3. Установите для параметра Тип запроса значение Вызов API.
  4. Установите Call Name (Имя вызова) на имя API, которое извлекает данные.
  5. Нажмите кнопку Подтвердить.
шах 6

Отображение данных в элементах пользовательского интерфейса

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

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

Добавление бесконечной прокрутки

Виджет StaggeredView отлично подходит для приложений с большим количеством изображений разного размера, например, для макета Pinterest. Он размещает все в аккуратной и интересной форме.

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

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

Настройка

Вы можете настроить внешний вид и поведение виджета с помощью различных свойств, доступных на панели свойств.

Изменение количества элементов по поперечной оси

Счетчик поперечных осей означает количество элементов, отображаемых в горизонтальном направлении. По умолчанию StaggeredView отображает два элемента в ряд (т.е. в горизонтальном направлении).
Чтобы изменить значение по умолчанию Cross Axis Count:

  1. Выберите StaggeredView в дереве виджетов или в области холста.
  2. Перейдите на панель свойств и прокрутите вниз до раздела Свойства StaggeredView.
  3. Измените значение поля ввода Cross Axis Count.
шах 9

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

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

  1. Выберите StaggeredView в дереве виджетов или в области холста.
  2. Перейдите на панель свойств и прокрутите вниз до раздела Свойства StaggeredView.
  3. Измените значение параметра Расстояние между осями.
  4. Измените значение параметра «Расстояние между осями«.
шах 10

Добавить подкладку

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

Настроить выравнивание

Здесь приведены инструкции по настройке выравнивания.

Отображение виджета пустого списка

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

Показать/скрыть StaggeredView

Прокрутка к началу или концу

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

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