SwipeableStack

SwipeableStack складывает карточки в стопку и позволяет смахивать верхнюю в любую сторону. Знакомая по Tinder механика просмотра анкет.

Как добавить

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

Смахивание кнопкой

Карточку удобно смахивать не только жестом, но и кнопкой — «не нравится» влево, «нравится» вправо.

Порядок такой:

1. Добавьте SwipeableStack.
2. Добавьте пару кнопок.
3. Повесьте на них действие Control SwipeableStack.

Обработка свайпов

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

1. Выделите SwipeableStack.
2. Выберите Actions в панели свойств и откройте Action Flow Editor.
3. Выберите нужный триггер: OnWidgetSwipe, OnLeftSwipe, OnRightSwipe, OnUpSwipe или On Down Swipe. Если направление не важно, берите On Widget Swipe.
4. Добавьте действие — например, показ снекбара.

Настройки

Внешний вид и поведение задаются в панели свойств.

Зацикливание

Переключатель Loop в Properties Panel > SwipeableStack Properties возвращает смахнутые карточки в конец стопки.

Разрешённые направления

Свойство Allowed Swipe Direction ограничивает, куда можно смахивать карточку.

Настройка живёт в Properties Panel > SwipeableStack Properties > Allowed Swipe Direction:

• All — в любую сторону.
• Left — только влево.
• Right — только вправо.
• Down — только вниз.
• Up — только вверх.
• Vertical — вверх или вниз.
• Horizontal — влево или вправо.

Для стопки анкет в духе Tinder ставят Horizontal: влево — «не нравится», вправо — «нравится».

Видимые карточки и их масштаб

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

Значения вводятся в Properties Panel > SwipeableStack Properties: Card Display Count и Next Card Scale. Для Next Card Scale осмысленный диапазон — от 0.9 до 0.99.

Порог смахивания

Порог определяет, насколько далеко нужно утащить карточку, чтобы жест засчитался. Значение от 0 до 1: чем ближе к 1, тем дальше придётся тянуть.

Задаётся свойством Swipe Threshold в Properties Panel > SwipeableStack Properties.

Угол наклона

Свойство Max Angle задаёт, насколько карточка поворачивается во время смахивания. Значение от 0 до 360 вводится в Properties Panel > SwipeableStack Properties > Max Angle.

Смещение нижних карточек

Нижние карточки можно сдвинуть относительно верхней — стопка станет объёмнее.

Значения вводятся в Properties Panel > SwipeableStack Properties > Back Card Offset — поля Horizontal и Vertical.

---

Действие Control Swipeable Stack

Действие смахивает карточку из логики приложения — например, по нажатию кнопки.

Виды смахивания

• Trigger Left Swipe — сдвинуть карточку справа налево.
• Trigger Right Swipe — слева направо.
• Trigger Up Swipe — снизу вверх.
• Trigger Down Swipe — сверху вниз.