Лист

Виджет ListView используется для отображения большого количества элементов в виде прокручиваемого списка. ListView — это расширенная версия виджета Column, который автоматически обеспечивает прокрутку, когда список элементов не помещается на экране.

Вы можете использовать ListView для вертикального или горизонтального отображения списка элементов.

Вот пример того, как вы можете использовать виджет ListView в своем проекте:

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

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

1. Сначала перетащите виджет ListView с вкладки Layout Elements (в панели виджетов).
2. Теперь добавьте виджет Container, перетащив его с той же вкладки Layout Elements или непосредственно из дерева виджетов.
3. Перетащите виджет Row внутрь добавленного Container.
4. Добавьте один виджет Image внутри Row.
5. Добавьте виджет Text внутри Row и установите его Theme Text Style на Title 1 в разделе Text Property в редакторе свойств. Также установите L (Left) padding равным 10.
6. Добавьте виджет IconButton, щелкните на значке по умолчанию Add Box Outlined + в разделе Icon в Property Editor, затем найдите и выберите значок chevron_right_sharp.

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

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

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

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

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

1. Показывать данные из Firestore
2. Отображение данных из вызова API
3. Отображение данных из Supabase

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

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

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

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

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

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

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

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

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

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

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

Чтобы показать изображение из URL, хранящегося внутри ключа JSON:

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

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

Чтобы показать данные из Supabase, создайте таблицу, сделайте запрос к таблице Supabase, а затем отобразите данные в виджете «Изображение и текст».

Бесконечная прокрутка автоматически загружает новые элементы по мере прокрутки списка вниз. Она работает, показывая сначала только ограниченное количество элементов (например, 15, 25) и загружая последующие элементы до того, как пользователь достигнет конца списка. В конце списка отображается круговая полоса прогресса по мере загрузки новых элементов.

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

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

• Бесконечная прокрутка в списке из коллекции Firestore
• Бесконечная прокрутка списка из вызова API

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

Чтобы включить бесконечную прокрутку:

1. Запросите коллекцию в ListView (пропустите, если вы уже сделали это).
2. Выберите ListView, перейдите на панель свойств и выберите раздел Backend Query.
3. Прокрутите вниз уже добавленный запрос и включите опцию Enable Infinite Scroll.
4. При включении бесконечной прокрутки также включается свойство Listen For Changes. Это означает, что список автоматически обновляется при внесении изменений в элемент. Это делается для поддержания актуальности всех элементов на экране. Однако при добавлении или удалении нового элемента список не обновляется. В редких случаях эту функцию необходимо отключить. Для этого отключите это свойство.
5. При бесконечной прокрутке элементы загружаются частями, называемыми страницами. Количество элементов, загружаемых на одной странице, определяется свойством Page Size. По умолчанию значение установлено на 25 (т.е. загружается 25 элементов на страницу). ListView загружает первую страницу, как только она становится видимой на экране, а последующие страницы (с количеством элементов, определенным в свойстве Page Size) загружаются по мере прокрутки экрана вниз. Вы можете настроить это значение в соответствии с вашим дизайном и требованиями.
6. Нажмите кнопку Сохранить.

Чтобы добавить бесконечную прокрутку при вызове API, у вас должна быть конечная точка, поддерживающая пагинацию, с хотя бы одним параметром запроса, принимающим номер страницы, например page, offset и т. д.

Когда вы добавляете вызов API с пагинацией в конструктор и включаете бесконечную прокрутку, мы предоставляем вам следующие переменные пагинации, которые вы можете передать в ваши переменные API. Они будут доступны в меню Set Variable.

1. Номер следующей страницы: Вы можете передать эту переменную для параметра запроса, который принимает номер страницы. Значение по умолчанию равно 0 и продолжает увеличиваться на единицу по мере прокрутки списка вниз, пока не достигнет конца.
2. Количество загруженных элементов: Это значение равно количеству элементов, возвращенных постраничным вызовом API.
3. Последний ответ: Это полезно, если вы хотите получить что-нибудь из последнего ответа, что может помочь вам получить следующий набор данных.

1. Добавление постраничного вызова API
2. Передача переменной пагинации в запросе вызова API

Страничный API — это API, который возвращает результат по частям. Большинство страничных API требует добавления параметров запроса, чтобы знать, сколько элементов нужно получить и с чего начать.

Например, этот вызов API https://reqres.in/api/users?per_page=20&page=1 требует параметра per_page, который указывает 20 элементов для загрузки на страницу, а параметр page указывает начать с первой страницы. Это называется постраничной пагинацией.

Посмотрите, как добавить страничный вызов API с помощью параметров запроса.

Этот шаг включает в себя добавление виджета ListView -> ListTile и запрос API-вызова с пагинацией.

1. Сначала выполните запрос и покажите данные из вызовов API.
2. При запросе вызова API передайте значение параметра запроса из переменной pagination.

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

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

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

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

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

Для корректировки расположения элементов в горизонтальном направлении:

1. Оберните строку внутри колонки, щелкнув правой кнопкой мыши на строке, выберите опцию Wrap Widget и затем щелкните на колонке. Вы также можете выбрать виджет Row и нажать сочетание клавиш (⌘ + B).
2. Перетащите виджет Text и IconButton за пределы Row и поместите его внутрь Column.
3. Установите для виджета Text тематический стиль текста на Body Text 1.
4. Перетащите виджет Row вверх и сделайте его первым дочерним элементом Column.
5. Примените это ко всем элементам или просто скопируйте-вставьте измененный элемент.

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

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

Аналогично, если свойство Axis установлено в Horizontal, то ListView будет занимать все горизонтальное пространство.

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

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

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

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

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

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

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

О том, как показать/скрыть виджет, читайте здесь.