Свайп стэк

Виджет SwipeableStack создает стопку виджетов, расположенных в типичном перекрывающемся порядке (первый/верхний виджет виден полностью, а последующие виджеты располагаются под ним). Виджет на вершине можно удалить, проведя по нему пальцем в любом направлении.

Например, с помощью этого виджета можно создать пользовательский опыт ‘Tinder-like swipe’.

Давайте посмотрим, как добавить виджет SwipeableStack, создав пример, который выглядит следующим образом:

Ниже приведены пошаговые инструкции:

1. Сначала нажмите на + Add Widget и перетащите виджет SwipeableStack с вкладки Layout Elements или добавьте его непосредственно из дерева виджетов.
2. Внутри SwipeableStack добавьте Card > Column (с Cross Axis Alignment -> Start).
3. Добавьте один виджет Image внутри колонки и установите его ширину на 100%, а высоту на 50%.
4. Чтобы отобразить заголовок, добавьте виджет Text, установите его Theme Text Style на Title 1, а left + top padding на 8.
5. Аналогично, для отображения описания добавьте еще один текстовый виджет и установите его тематический стиль текста на Subtitle 2.
6. Чтобы показать несколько карточек, можно скопировать виджет Card и вставить его несколько раз внутрь виджета SwipeableStack.

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

Мы позволяем вам получать данные из следующих источников:

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

Вы можете использовать Firstore для хранения данных вашего приложения в модели коллекция-документ. Давайте посмотрим, как можно отобразить элементы из коллекции Firestore в SwipeableStack, построив пример, похожий на приведенный ниже:

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

Чтобы показать данные из Firestore:

1. Сначала запросите коллекцию на SwipeableStack, чтобы получить список документов из коллекции Firestore (инструкции аналогичны запросу коллекции на ListView).
2. Отобразите данные (информацию о кошке) на элементах пользовательского интерфейса, таких как Image и Text.

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

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

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

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

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

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

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

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

Чтобы показать данные (информацию о кошке) на элементах пользовательского интерфейса, таких как изображение и текст:

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

Вы можете захотеть разрешить пользователям пролистывать карточки при нажатии кнопки. Например, пролистывать карточку при нажатии кнопки «Не нравится» или «Отклонить», а правую карточку — при нажатии кнопки «Нравится» или «Принять». Вы можете сделать это, добавив действие Control Swipeable Stack.

Вот как можно провести по карте нажатием кнопки:

1. Сначала добавьте виджет SwipeableStack.
2. Добавьте пару кнопок внутри виджета карты. (например, кнопку «нравится» или «не нравится»).
3. Теперь выберите любую кнопку и определите действие Control Swipeable Stack.

Вы можете захотеть получать обратный вызов, когда дочерний виджет (например, карточка) пролистывается, и добавлять дальнейшие действия. Например, обновление элемента (флаг «нравится» или «не нравится») в бэкенде на основе типа пролистывания (влево или вправо).

Вот как можно получить обратный вызов при пролистывании дочерних виджетов:

1. Выберите виджет SwipeableStack в дереве виджетов или в области холста.
2. Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне.
3. Выберите тип свайпа (среди вариантов On Widget Swipe, On Left Swipe, On Right Swipe, On Up Swipe, On Down Swipe), при котором вы хотите получить обратный вызов. Если направление пролистывания для вас не важно, выберите On Widget Swipe.
4. Теперь вы можете добавить любое действие, которое будет вызвано при получении выбранного обратного вызова — например, показ сообщения на панели при пролистывании.

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

Чтобы изменить размер верхней, средней и нижней карточек:

1. Выберите виджет SwipeableStack в дереве виджетов или в области холста и перейдите на панель свойств.
2. Чтобы изменить высоту и ширину верхней карточки, введите значение от 0 до 1 в поле «Дробь высоты верхней карточки» и «Дробь ширины верхней карточки«. Примечание: Эти значения будут считаться в процентах. Например, если вы введете 0,5, карточка будет занимать 50% доступного пространства.
3. Аналогичным образом можно настроить высоту и ширину средней и нижней карты.