Объекты в шахматном порядке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Генерация динамических дочерних элементов поможет вам подготовить список элементов, присутствующих в ответе 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. Нажмите Подтвердить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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