Flutter - это SDK для мобильных приложений, который позволяет разработчикам создавать и публиковать кроссплатформенные приложения для Android и iOS. Одной из наиболее ценных особенностей Flutter является возможность создания перетаскиваемых U.I. элементов. С помощью этой функции можно создавать кнопки, списки и даже целые экраны, которые можно перетаскивать по всему приложению.
Виджет Draggable позволяет добавить поведение перетаскивания к любому виджету. DragTarget - это виджет, который позволяет указать, какой виджет должен принять событие падения, когда пользователь уронит перетаскиваемый объект.
В этой статье мы поговорим о перетаскивании, виджетах Draggable и DragTarget, которые являются частью библиотеки Flutter Toolkit.
Об элементах пользовательского интерфейса перетаскивания
Элементы пользовательского интерфейса Drag and Drop - это новый виджет Flutter, который позволяет создавать мощные пользовательские взаимодействия. Вы можете использовать элементы пользовательского интерфейса Drag and Drop для создания основных взаимодействий вашего приложения, таких как перетаскивание объекта из одного места вашего приложения в другое.
Виджет DragTarget в Flutter позволяет вам определить некоторые целевые области на странице, где будут разрешены события перетаскивания. Например, если пользователь перетаскивает изображение на кнопку, эта кнопка может быть настроена как цель для событий перетаскивания (например, она может получать падения). Когда перетаскиваемые элементы попадают в цель, они отскакивают от нее и падают на место под действием силы тяжести в соответствии с углом их попадания в область цели.
Оглавление
Перетаскиваемые элементы пользовательского интерфейса
Виджет Draggable позволяет создать перетаскиваемый элемент в вашем приложении. Функция перетаскивания - это популярная функция, позволяющая перетащить объект из одной части экрана и бросить его в другую. Это полезно для перестановки элементов, перемещения файлов и многих других вещей.
Наиболее часто перетаскиваемые интерфейсы используются в веб-дизайне. Многие веб-сайты позволяют пользователям переставлять элементы на своих страницах с помощью этой функции. Помимо использования на веб-сайтах, dragable может применяться и во многих других областях, например, в мобильных приложениях, настольных программах и даже видеоиграх!
Элемент DragTarget
DragTarget - это виджет, который позволяет указать область приложения, где может быть запущено действие перетаскивания. DragTarget является подклассом GestureDetector, и вы можете использовать его для обнаружения действий перетаскивания или жестов в вашем приложении.
DragTarget имеет три метода:
onStart - вызывается, когда пользователь начинает перетаскивание
onDrag - вызывается, когда пользователь проводит пальцем по целевой области
onEnd - вызывается, когда пользователь прекращает перетаскивание.
Используя эти виджеты, вы можете разрешить перетаскивание всего виджета или только его части!
Существует два виджета, которые позволяют перетаскивать U.I. элементы во Flutter: Draggable и DragTarget. Draggable позволяет перетаскивать весь виджет или его часть (например, фон). DragTarget используется, когда несколько элементов реагируют на одно и то же событие (например, реагируют с разными анимациями).
Виджеты Draggable и DragTarget - это первый шаг к тому, чтобы дать пользователям возможность взаимодействовать с вашим приложением. Эти виджеты позволяют создавать возможности перетаскивания для перемещения элементов по экрану, включая перемещение и изменение размеров элементов U.I. или целых страниц.
При создании возможностей перетаскивания в приложении Flutter можно использовать виджет Draggable. Виджет Draggable позволяет перетаскивать объекты по экрану.
Для реализации перетаскивания необходимо использовать один или несколько виджетов Draggable и как минимум один виджет DragTarget. Виджет DragTarget может быть любой формы или размера, если он имеет действительную цель падения для виджета Draggable.
Эти виджеты могут обрабатывать перетаскивание собственных элементов и настраивать виджет dragable, используя пользовательское изображение вместо цвета фона по умолчанию.
Вы можете комбинировать их для создания мощных пользовательских взаимодействий. Например, если вы хотите, чтобы пользователь мог перетащить изображение на кнопку или перетащить целый виджет из одного места вашего приложения в другое, то Draggable и DragTarget - это первые шаги к тому, чтобы дать ему такую возможность.
Пример
Перетаскивание - это обычное взаимодействие, которое используется во многих приложениях. Это простой способ выполнения различных задач, который можно использовать для самых разных целей. Например, вы можете перетащить файлы в электронное письмо или переместить их на телефоне.
В этом примере мы рассмотрим начальные шаги, необходимые для создания простого элемента пользовательского интерфейса с перетаскиванием. Элементы можно перетаскивать в нужное место, а также опускать на другие элементы.
Первым шагом будет создание виджета Draggable. Этот виджет будет определять положение нашего элемента, а также его границы. Чтобы сделать виджет перетаскиваемым, нужно дать ему два дочерних элемента: виджет ”Текст” и виджет ”Текст в рамке”. Текст будет отображаться в рамке при перетаскивании. В поле будет содержаться вся необходимая информация о том, куда нужно опустить ваш элемент.
Второй шаг - создание виджета DragTarget, который позволяет вам указать, какие другие виджеты могут быть использованы для сброса элемента на них. Вы также можете установить пользовательские свойства для экземпляра DragTarget, если вам нужны специальные функции, когда ваш элемент опускается на другой (например, изменение цвета или скрытие/показ чего-либо).
Пример
main.dart
import 'package:flutter/material.dart';
import 'package:dotted_border/dotted_border.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false, home: DemoExample());
}
}
class DemoExample extends StatefulWidget {
const DemoExample({Key? key}) : super(key: key);
@override
State<demoexample> createState() => _DemoExampleState();
}
class _DemoExampleState extends State<demoexample> {
@override
Widget build(BuildContext context) {
bool isDropped = false;
String _color = "red";
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LongPressDraggable<string>(
// Data is the value this Draggable stores.
data: _color,
feedback: Material(
child: Container(
height: 170.0,
width: 170.0,
decoration: const BoxDecoration(
color: Colors.redAccent,
),
child: const Center(
child: Text(
'Dragging',
textScaleFactor: 2,
),
),
),
),
childWhenDragging: Container(
height: 150.0,
width: 150.0,
color: Colors.grey,
child: const Center(
child: Text(
'I was here',
textScaleFactor: 2,
),
),
),
child: Container(
height: 150.0,
width: 150.0,
color: Colors.redAccent,
child: const Center(
child: Text(
'Drag me',
textScaleFactor: 2,
),
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.15,
),
DragTarget<string>(
builder: (
BuildContext context,
List<dynamic> accepted,
List<dynamic> rejected,
) {
return DottedBorder(
borderType: BorderType.RRect,
radius: const Radius.circular(12),
padding: const EdgeInsets.all(6),
color: Colors.black,
strokeWidth: 2,
dashPattern: const [8],
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(12)),
child: Container(
height: 200,
width: 200,
color: isDropped ? Colors.redAccent : null,
child: Center(
child: Text(
!isDropped ? 'Drop here' : 'Dropped',
textScaleFactor: 2,
)),
),
),
);
},
onAccept: (data) {
debugPrint('hi $data');
setState(() {
isDropped = true;
});
debugPrint('hi $isDropped');
},
onWillAccept: (data) {
return data == _color;
},
),
],
),
));
}
}
</dynamic></dynamic></string></string></demoexample></demoexample>
Выход
Заключение
В этой статье рассмотрены два новых виджета для построения drag-and-drop взаимодействий при разработке приложений во Flutter. Эти виджеты позволяют легко создавать полноценные drag-and-drop интерфейсы во Flutter с помощью всего нескольких строк кода! Надеюсь, вам понравилось читать эту статью.
Часто задаваемые вопросы (FAQ)
- Есть ли во Flutter пользовательский интерфейс drag-and-drop?
Flutter предоставляет вам виджет LongPressDraggable, который обеспечивает точное поведение, необходимое для начала работы с drag-and-drop взаимодействием. Виджет LongPressDraggable распознает момент длительного нажатия и отображает новый виджет рядом с пальцем пользователя. При перетаскивании виджет будет следовать за пальцем пользователя.
- Как создать пользовательский выпадающий список в приложении Flutter?
Кнопка выпадения сделает полноэкранный стек с помощью наложения. Добавьте полноэкранный детектор жестов позади выпадающего списка, чтобы он закрывался, когда пользователь коснется любого места на экране. Таким образом, наложение связано с кнопкой с помощью LayerLink и виджета CompositedTransformerFollower.
- Как использовать DragTarget во Flutter?
DragText < T extends Object > класс Null безопасность. Виджет получит данные, когда перетаскиваемый виджет будет сброшен. Когда перетаскиваемый виджет перетаскивается поверх цели перетаскивания, цель перетаскивания спрашивается, примет ли она данные, которые несет перетаскиваемый виджет.
- Что такое перетаскиваемый виджет и виджет DragTarget?
Перетаскиваемый виджет распознает начало жеста перетаскивания и отображает виджет обратной связи, который отслеживает движение пальцев пользователя по экрану. Однако если пользователь перемещает палец к верхней части виджета DragTarget, эта цель может принимать данные, переносимые перетаскиваемым виджетом.
Виджет DragTarget в Flutter будет принимать данные, перетаскиваемые пользователем. Он позволяет перетащить элемент из одного виджета в другой. Следовательно, этот виджет используется для создания игр и других интерактивных пользовательских интерфейсов.