Перейти к основному содержимому

SwipeableStack

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

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

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

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

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

Возможно, вам захочется разрешить пользователям перетаскивать карты кнопкой - например, свайпнуть карту влево через кнопку "не нравится" или "отклонить", а вправо - через кнопку "нравится" или "принять".

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

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

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

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

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

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

Настройка​

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

Циклические карты​

Чтобы сделать циклическое перемещение карт в SwipeableStack, перейдите в Панель свойств > Свойства SwipeableStack > включите переключатель Петля.

loopcard

Настройка отображения карт и масштаба​

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

Для этого перейдите в Панель свойств > Свойства SwipeableStack > введите значение в Количество отображаемых карт и Масштаб следующей карты. Для Масштаб следующей карты экспериментируйте со значениями от 0.9 до 0.99, чтобы достичь желаемого визуального эффекта.

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

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

Для этого перейдите в Панель свойств > Свойства SwipeableStack > введите значение в свойство Порог свайпа.

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

Вы можете контролировать наклон или вращающийся эффект карт во время свайпа. Свойство Максимальный угол позволяет установить максимальный угол поворота карты во время жеста свайпа.

Для этого перейдите в Панель свойств > Свойства SwipeableStack > введите значение (0-360) в свойство Максимальный угол.

Изменение смещения задней карты​

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

Для изменения смещения задних карт перейдите в Панель свойств > Свойства SwipeableStack > Смещение задней карты > введите значения в поля Горизонтальное и Вертикальное.

Действие Управления Swipeable Stack​

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

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

Существуют следующие типы свайпа карт, которые вы можете добавить:

  • Запуск левого свайпа: Перемещает текущую карту справа налево.
  • Запуск правого свайпа: Перемещает текущую карту слева направо.
  • Запуск свайпа вверх: Перемещает текущую карту вверх снизу вверх.
  • Запуск свайпа вниз: Перемещает текущую карту вниз сверху вниз.