Draggable<T>({
Key? key,
required this.child,
this.feedback,
this.data,
this.axis,
this.childWhenDragging,
this.feedbackOffset = Offset.zero,
this.dragAnchor = DragAnchor.child,
this.affinity,
this.onDragStarted,
this.onDragEnd,
this.onDraggableCanceled,
this.maxSimultaneousDrags,
this.canDrag = true,
this.gestureRecognizer,
this.dragAnchorStrategy = DefaultDragAnchorStrategy,
child (Widget): 被拖动的子部件。
feedback (Widget?): 拖动时显示的反馈部件。如果为null，则使用child作为反馈部件。
data (T?): 拖动过程中传递给DragTarget的数据。
axis (Axis?): 限制拖动的轴向。可以是Axis.horizontal（水平方向）或Axis.vertical（垂直方向）。
childWhenDragging (Widget?): 在拖动时替代child的部件。如果为null，则在拖动时显示child。
feedbackOffset (Offset): 反馈部件相对于拖动手势的偏移。
dragAnchor (DragAnchor): 控制拖动锚点的位置。可以是DragAnchor.child（默认值，锚点在child部件的中心）或DragAnchor.pointer（锚点在拖动手势的位置）。
affinity (Axis?): 用于指定对齐到某个轴的情况，可以是Axis.horizontal或Axis.vertical。
onDragStarted (VoidCallback?): 拖动开始时的回调函数。
onDragEnd (DraggableDetailsCallback?): 拖动结束时的回调函数。
onDraggableCanceled (DraggableCanceledCallback?): 在拖动被取消时的回调函数。
maxSimultaneousDrags (int?): 同时拖动的最大数量。
canDrag (bool): 是否允许拖动。如果为false，Draggable将不响应拖动手势。
gestureRecognizer (DragGestureRecognizer?): 用于自定义拖动手势检测的手势识别器。
dragAnchorStrategy (DragAnchorStrategy): 用于控制拖动锚点的策略。
Draggable<int>(
data: 42,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text("Drag me"),
feedback: Container(
width: 120,
height: 120,
color: Colors.blue.withOpacity(0.5),
child: Center(
child: Text("Dragging..."),
onDragStarted: () {
// 拖动开始时执行的操作
print("Drag started!");
onDragEnd: (details) {
// 拖动结束时执行的操作
print("Drag ended!");
在这个例子中，当用户拖动包含文本"Drag me"的蓝色容器时，onDragStarted回调被触发，打印"Drag started!"。在拖动结束时，onDragEnd回调被触发，打印"Drag ended!"。被拖动的数据是42，可以通过DragTarget接收并处理。
DragTarget 介绍
DragTarget 是 Flutter 框架中的一个小部件，用于接收拖动操作并处理拖动过程中传递的数据。它是与 Draggable 配合使用的一种方式，允许你指定拖动对象应该如何被接收和处理。
以下是关于 DragTarget 的详细介绍：
DragTarget<T>(
{Key? key,
required this.builder,
this.onWillAccept,
this.onAccept,
this.onLeave,
this.hitTestBehavior = HitTestBehavior.deferToChild,
this.feedback,
this.child,
builder (Widget Function(BuildContext, List<T?>, List<dynamic>): 用于构建 DragTarget 的子部件。builder 接受三个参数，分别是 BuildContext、当前拖动的数据列表和之前已经接收的数据列表。
onWillAccept (bool Function(T)?): 在拖动对象进入 DragTarget 区域时调用，用于决定是否接受拖动对象。如果返回 true，则 onAccept 将被调用。
onAccept (void Function(T)?): 在拖动对象被释放到 DragTarget 区域内时调用，用于处理接受的拖动数据。
onLeave (void Function(T)?): 在拖动对象离开 DragTarget 区域时调用。
hitTestBehavior (HitTestBehavior): 用于决定点击测试的行为。默认值是 HitTestBehavior.deferToChild，表示点击测试会被委托给子部件。
feedback (Widget?): 用于自定义拖动时的反馈部件。
child (Widget?): 用于放置在 DragTarget 区域内的子部件。
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
width: 200,
height: 200,
color: Colors.grey,
child: Center(
child: Text("Drop here"),
onWillAccept: (data) {
// 在拖动对象进入 DragTarget 区域时调用
// 返回 true 表示接受拖动对象
return true;
onAccept: (data) {
// 在拖动对象被释放到 DragTarget 区域内时调用
// 处理接受的拖动数据
print("Accepted data: $data");
onLeave: (data) {
// 在拖动对象离开 DragTarget 区域时调用
在这个例子中，DragTarget 是一个大小为 200x200 的灰色容器，上面显示着 "Drop here" 文本。当有拖动对象进入这个容器时，onWillAccept 将被调用，决定是否接受拖动对象。如果返回 true，则 onAccept 将在拖动对象被释放时被调用，处理接受的拖动数据。onLeave 在拖动对象离开 DragTarget 区域时被调用。这种方式可以用来实现拖放交互，其中 DragTarget 接收并处理 Draggable 的数据。
DragTarget 如何接收Draggable传递过来的数据？
DragTarget 通过 onAccept 回调函数接收从 Draggable 拖动传递过来的数据。这个回调函数在拖动对象被释放到 DragTarget 区域时调用。
以下是一个简单的示例，演示了如何使用 Draggable 和 DragTarget 来传递和接收数据：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Draggable and DragTarget Example'),
body: MyDraggableAndDragTarget(),
class MyDraggableAndDragTarget extends StatefulWidget {
@override
_MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();
class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {
String data = 'Initial Data';
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Draggable<String>(
data: 'Dragged Data',
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text('Drag Me'),
feedback: Container(
width: 100,
height: 100,
color: Colors.blue.withOpacity(0.5),
child: Center(
child: Text('Dragging...'),
childWhenDragging: Container(
width: 100,
height: 100,
color: Colors.blue.withOpacity(0.5),
SizedBox(height: 20),
DragTarget<String>(
builder: (BuildContext context, List<String?> candidateData, List<dynamic> rejectedData) {
return Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Text('Drop Here'),
onWillAccept: (data) {
// 当拖动对象进入 DragTarget 区域时调用
// 返回 true 表示接受拖动对象
return true;
onAccept: (data) {
// 当拖动对象被释放到 DragTarget 区域内时调用
// 处理接受的拖动数据
setState(() {
this.data = data ?? 'No Data';
onLeave: (data) {
// 当拖动对象离开 DragTarget 区域时调用
SizedBox(height: 20),
Text('Received Data: $data'),
在这个例子中，Draggable 包含一个文本框，你可以拖动它。DragTarget 是一个灰色容器，当你把文本框拖动到这个容器上时，它将接收拖动的数据，并将接收到的数据显示在屏幕上。
<center>结束语</center>
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！
