Draggable + DragTarget

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

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

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

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

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

Шаги для создания такого примера следующие:

1. Создайте переменную состояния страницы
2. Добавьте виджеты Draggable
3. Добавьте виджет DragTarget
4. Получите уведомления о событиях перетаскивания

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

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

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

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

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

примечание

По мере продвижения в этом разделе вы узнаете, как эта информация критически важна для виджета DragTarget при оценке соответствия переносимого элемента ожидаемому типу для полки.

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

1. Внутри виджета Row добавьте виджеты Draggable непосредственно из дерева виджетов или области холста.
2. Внутри виджета Draggable вы можете добавить любой виджет в качестве дочернего виджета. Для этого примера мы использовали виджет Image.
3. Чтобы добавить данные к перетаскиваемым виджетам, выберите Draggable widget > Properties Panel > Draggable Properties > укажите Type данных и его Value.

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

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

Давайте посмотрим, как добавить виджет DragTarget:

1. Откройте Палитру виджетов и найдите виджет DragTarget на вкладке Base Elements. Вы можете перетащить его в нужное место или добавить непосредственно из дерева виджетов.
2. Внутри виджета DragTarget добавьте Container виджет, предпочтительно того же размера, что и изображение, и установите его цвет фона на прозрачный. Это будет служить зоной сброса для перетаскиваемых элементов.
3. Теперь вам нужно указать тип данных, который этот целевой объект будет принимать. Для этого выберите DragTarget widget > Properties Panel > Draggable Properties > укажите Type данных. Это критически важно для того, чтобы гарантировать, что на цель могут быть сброшены только правильные элементы.

4. Получение уведомлений о событиях перетаскивания

Виджет DragTarget предоставляет вам различные события перетаскивания (также называемые обратными вызовами), которые являются важными для создания функций перетаскивания.

Вот они:

• При Принятии Перетаскивания: Действия в этой секции срабатывают, когда данные сброшены над DragTarget.
• При Входе Перетаскиваемого: Действия в этой секции срабатывают, когда данные перетаскиваются над DragTarget.
• При Выходе Перетаскиваемого: Действия в этой секции срабатывают, когда перетаскиваемый элемент, который ранее находился над DragTarget, покидает его область. Например, в приложении для покупок, если пользователь решает не поместить предмет в корзину и уводит его, этот обратный вызов события может использоваться для удаления выделения из корзины.

подсказка

Вы можете использовать При Принятии Перетаскивания или При Входе Перетаскиваемого, чтобы определить, может ли DragTarget принять данные, и соответственно обновлять состояние приложения.

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

Давайте посмотрим, как добавить события перетаскивания для этого примера:

1. Выберите виджет DragTarget, выберите Действия из панели свойств (правое меню), и нажмите Открыть. Это откроет Редактор потока действий в новом всплывающем окне.

2. Чтобы гарантировать, что на полку сбрасывается только растение:

   1. Выберите При Принятии Перетаскивания и выберите + Добавить условное действие.
   2. Из меню установить переменную выберите Drag Target > Элемент данных, перетаскиваемый. Это захватывает данные перетаскиваемого элемента, который мы добавили в шаге 2.
   3. Проверьте, соответствует ли захваченные данные ожидаемому элементу, то есть растению.
   4. В разделе TRUE вы можете добавить сообщение снэкбара и обновить переменную isShelfFull на True. Это создаст эффект, будто пользователь действительно перетащил элемент на полку.

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

При Принятии Перетаскивания

При Выходе Перетаскиваемого