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

Draggable + DragTarget

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

Когда элемент перетаскивается над DragTarget, виджет получает возможность определить, может ли он принять этот элемент. Если может — он выполняет заданное действие, например, обновляет состояние приложения.

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

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

Рассмотрим пример, в котором пользователю предлагается разместить растения на полке.

1. Создание переменной состояния страницы​

В примере используются два изображения полки — пустая и заполненная растениями.
Чтобы управлять отображением нужного изображения в зависимости от результата перетаскивания, создайте переменную состояния страницы isShelfFull с типом Boolean и значением по умолчанию False.

img_1.png

Управление изображением через переменную состояния страницы

2. Добавление виджетов Draggable​

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

примечание

Эти данные позже понадобятся виджету DragTarget, чтобы определить, подходит ли сбрасываемый элемент.

  1. Внутри виджета Row добавьте Draggable-элементы.
  2. В качестве дочернего виджета используйте Image.
  3. Задайте тип и значение данных в панели свойств (Draggable Properties).
к сведению

Виджет Draggable также поддерживает события перетаскивания (Action Triggers):

  • On Drag Started — начало перетаскивания;
  • On Drag Update — процесс перетаскивания (можно отслеживать позицию);
  • On Drag Completed — успешное завершение (элемент сброшен в DragTarget);
  • On Drag Cancelled — отмена перетаскивания;
  • On Drag End — завершение операции в любом случае.

3. Добавление виджета DragTarget​

DragTarget принимает сбрасываемые элементы.
Мы помещаем его поверх изображения полки с помощью Stack, а отображение управляется виджетом ConditionalBuilder, который использует переменную isShelfFull.

  1. В палитре виджетов найдите DragTarget (вкладка Base Elements) и добавьте его в нужное место.
  2. Внутри DragTarget добавьте Container того же размера, что и изображение, с прозрачным фоном. Это будет зона приёма.
  3. Укажите тип данных, который может принимать цель (Draggable Properties → Type).

4. Обработка событий перетаскивания​

Виджет DragTarget предоставляет обратные вызовы (callbacks), важные для логики drag-and-drop:

  • On Drag Accept — вызывается при успешном сбросе элемента;
  • On Drag Enter — при наведении над целью;
  • On Drag Exit — когда элемент уходит из области (например, пользователь передумал и увёл элемент от корзины).
подсказка

Используйте On Drag Accept или On Drag Enter, чтобы определить, можно ли принять элемент и обновить состояние.
Если нужно среагировать на вход — используйте On Drag Enter, а если только после сброса — On Drag Accept.

Пример настройки:

  1. Выберите DragTarget → Actions → Open, чтобы открыть Action Flow Editor.
  2. Для проверки, что сбрасывается именно растение:
    • Добавьте On Drag Accept → + Add Conditional Action;
    • Выберите Drag Target → Dragged Data — это данные из шага 2;
    • Сравните полученные данные с «plant»;
    • В ветке TRUE покажите snackbar и обновите isShelfFull = True.
  1. В On Drag Exit добавьте действие, которое обновит isShelfFull = False, чтобы вернуть полку в пустое состояние, если элемент не был сброшен.

img_2.png