SwipeableStack

SwipeableStack — это виджет, предназначенный для наложения карт или слоев содержимого, которые пользователи могут свайпать в любом направлении. Он часто используется в приложениях для знакомств, таких как Tinder, для просмотра профилей.

Добавление виджета SwipeableStack

Чтобы добавить виджет Stack:

1. Откройте Палитру виджетов и найдите виджет SwipeableStack на вкладке Layout Elements. Вы можете перетащить его в нужное место или добавить непосредственно из дерева виджетов или области холста.
2. По умолчанию добавляется четыре карты, и он отображается как SwipeableStack Page. Чтобы увидеть другую страницу на холсте, перейдите в Properties Panel > и установите Active Page на карту, которую хотите просмотреть.
3. Чтобы добавить новую карту, перейдите в Properties Panel > Active Page > и нажмите + Add Page.
4. Чтобы удалить карту, выберите SwipeableStack Page (которую хотите удалить) из дерева виджетов или области холста и нажмите клавишу Delete на клавиатуре.
5. По умолчанию SwipeableStack Page содержит виджет Image; однако вы можете настроить его в соответствии с вашими требованиями. Например, если вы хотите создать пользовательский опыт, похожий на Tinder, вы можете обернуть (⌘ + B) виджет изображения по умолчанию в виджет Stack и затем добавить дополнительные виджеты.

Свайп карты по нажатию кнопки

Вы можете разрешить пользователям свайпать карты нажатием кнопки — например, свайпать карту влево с помощью кнопки «не нравится» или «отклонить», а вправо — с помощью кнопки «нравится» или «принять».

Вот как вы можете свайпать карту по нажатию кнопки:

1. Сначала добавьте виджет SwipeableStack.
2. Добавьте несколько кнопок внутрь.
3. Теперь добавьте действие Control SwipeableStack.

Получение уведомлений о свайпе

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

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

1. Выберите виджет SwipeableStack.
2. Выберите Actions в панели Properties и откройте Action Flow Editor.
3. Выберите тип свайпа (среди OnWidgetSwipe, OnLeftSwipe, OnRightSwipe, OnUpSwipe, On Down Swipe), при котором вы хотите получить обратный вызов. Если направление свайпа для вас не важно, выберите On Widget Swipe.
4. Теперь вы можете добавить любое действие, которое будет запущено при получении выбранного обратного вызова — например, отображение сообщения Snackbar при свайпе.

Настройка

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

Циклический просмотр карт

Чтобы включить циклический просмотр карт в SwipeableStack, перейдите в Properties Panel > SwipeableStack Properties > и включите переключатель Loop.

Разрешенное направление свайпа

Вы можете управлять направлениями, в которых пользователи могут свайпать карты, регулируя свойство Allowed Swipe Direction. Это позволяет настроить взаимодействие пользователей с SwipeableStack, ограничивая свайпы определенными направлениями или разрешая свайп в любом направлении.

Для этого перейдите в Properties Panel > SwipeableStack Properties > Allowed Swipe Direction и выберите один из следующих вариантов:

• All: Пользователи могут свайпать во всех направлениях.
• Left: Свайп только влево.
• Right: Свайп только вправо.
• Down: Свайп только вниз.
• Up: Свайп только вверх.
• Vertical: Свайп вверх или вниз.
• Horizontal: Свайп влево или вправо.

Например, в макете Swipeable Cards, похожем на Tinder, вы можете установить Allowed Swipe Direction в Horizontal, чтобы пользователи могли свайпать влево для «не нравится» и вправо для «нравится» профилю.

Настройка количества отображаемых карт и масштаба

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

Для этого перейдите в Properties Panel > SwipeableStack Properties > и введите значения в Card Display Count и Next Card Scale. Для Next Card Scale поэкспериментируйте со значениями от 0.9 до 0.99, чтобы добиться желаемого визуального эффекта.

Изменение порога свайпа

«Порог» обычно относится к чувствительности жестов свайпа. Он определяет, насколько далеко пользователь должен свайпнуть карту, чтобы это считалось полным действием свайпа. Он принимает значение от 0 до 1; порог, установленный ближе к 1, требует от пользователя свайпнуть или перетащить карту дальше по экрану, чтобы запустить действие свайпа.

Для этого перейдите в Properties Panel > SwipeableStack Properties > и введите значение в свойство Swipe Threshold.

Установка угла свайпа карты

Вы можете управлять эффектом наклона или поворота карт при свайпе. Свойство Max Angle позволяет установить максимальный угол поворота, которого может достичь карта во время жеста свайпа.

Для этого перейдите в Properties Panel > SwipeableStack Properties > и введите значение (0–360) в свойство Max Angle.

Изменение смещения задних карт

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

Чтобы изменить смещение задних карт, перейдите в Properties Panel > SwipeableStack Properties > Back Card Offset > и введите значения в поля Horizontal и Vertical.

---

Управление Swipeable Stack [Action]

С помощью этого действия вы можете свайпать виджеты внутри виджета SwipeableStack. Например, свайпать карту влево или вправо при нажатии кнопки.

Типы свайпа карты

Доступны следующие типы свайпа карты:

• Trigger Left Swipe: Перемещает текущую карту справа налево.
• Trigger Right Swipe: Перемещает текущую карту слева направо.
• Trigger Up Swipe: Перемещает текущую карту вверх снизу.
• Trigger Down Swipe: Перемещает текущую карту вниз сверху.