Draggable 是 Flutter 中一个用来实现拖拽功能的控件。它允许用户将一个控件拖动到屏幕的不同位置，并且可以与 DragTarget 控件一起工作来完成拖拽交互。Draggable 控件不仅可以在应用内拖动控件，还可以处理拖拽反馈、拖拽过程中控件的状态变更等操作。
1. Draggable 控件的构造函数
Draggable<T>({
Key? key,
required T data, // 传递的拖拽数据
required Widget child, // 拖拽控件本身的显示
Widget? feedback, // 拖拽过程中展示的控件（通常是透明的）
Widget? childWhenDragging, // 拖拽时原控件的替代显示
Axis? axis, // 指定拖拽方向（水平或垂直）
bool? ignorePointer, // 是否忽略手势
bool? dragAnchorStrategy, // 自定义拖拽时锚点位置
bool? onDragStarted, // 拖拽开始时的回调
bool? onDragEnd, // 拖拽结束时的回调
bool? onDraggableCanceled, // 拖拽取消时的回调
})
主要参数：
data：拖拽的核心数据，当用户拖拽控件时会携带此数据（可以是任意类型）。child：正常显示的控件。它是拖拽对象的原始显示（例如，可以是一个文本或图像）。feedback：拖拽时展示的控件，通常是半透明的，这个控件在拖拽期间会悬浮在用户的手指上方。childWhenDragging：当控件被拖拽时，原控件的替代显示（通常是空白或一个灰色的占位符）。axis：控制拖拽的方向，值可以是Axis.horizontal（水平）或Axis.vertical（垂直），也可以为Axis.none（没有方向限制）。ignorePointer：是否忽略手势。如果为true，该控件在拖拽时将无法响应任何手势。onDragStarted：拖拽开始时的回调，通常用来更新状态或做一些准备工作。onDragEnd：拖拽结束时的回调，通常用来处理拖拽结束后的逻辑。onDraggableCanceled：当拖拽被取消时的回调，通常是当控件离开了任何DragTarget区域。
2. Draggable 的工作原理
Draggable 控件主要通过 data 属性将需要拖拽的数据传递给其他控件，特别是 DragTarget，在用户拖拽控件时，Draggable 控件会自动执行以下操作：
- 拖拽开始：当用户开始拖拽时，
Draggable控件会展示指定的feedback，并且显示出原始控件的占位符（childWhenDragging）。 - 拖拽过程：拖拽过程中，用户可以将控件在屏幕上拖动，通常会通过
onDragStarted和onDragEnd回调来触发相应的逻辑。 - 拖拽结束或取消：当拖拽对象被放置到
DragTarget中，或者当用户取消拖拽时，Draggable会触发onDragEnd或onDraggableCanceled回调。
3. 常见用法
示例 1：基本的拖拽控件
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 Example')),
body: Center(
child: Draggable<int>(
data: 100, // 拖拽的数据
child: Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text('Drag me'),
),
feedback: Material(
color: Colors.transparent,
child: Container(
padding: EdgeInsets.all(16),
color: Colors.blue.withOpacity(0.5),
child: Text('Dragging'),
),
),
childWhenDragging: Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
child: Text('Gone'),
),
),
),
),
);
}
}
解释：
- 在此例中，
Draggable<int>创建了一个可以拖拽的蓝色矩形，其内容是文本“Drag me”。 - 当用户开始拖拽时，
feedback使矩形变成一个半透明的版本（显示文本“Dragging”），同时，原始控件会被替换为一个灰色的占位符（childWhenDragging）。
示例 2：与 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 with DragTarget')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Draggable<String>(
data: "Hello, Flutter!", // 拖拽的数据
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(20),
child: Text('Drag me'),
),
feedback: Material(
color: Colors.transparent,
child: Container(
color: Colors.blue.withOpacity(0.5),
padding: EdgeInsets.all(20),
child: Text('Dragging'),
),
),
childWhenDragging: Container(
padding: EdgeInsets.all(20),
color: Colors.grey,
child: Text('Gone'),
),
),
SizedBox(height: 50),
DragTarget<String>(
onAccept: (data) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Dropped: $data')),
);
},
builder: (context, candidateData, rejectedData) {
return Container(
width: 300,
height: 200,
color: Colors.orange,
child: Center(child: Text('Drop Here')),
);
},
),
],
),
),
),
);
}
}
解释：
- 在这个例子中，
Draggable<String>允许用户拖拽一个带有文本“Drag me”的蓝色矩形。 - 拖拽过程中，
feedback显示一个半透明的矩形，childWhenDragging在原位置展示一个灰色占位符。 DragTarget<String>用来接收拖拽的字符串数据，当用户将拖拽对象放入目标区域时，显示一个 SnackBar，告知接收到的内容。
4. Draggable 的回调详解
onDragStarted：在拖拽开始时调用。通常用来执行一些初始操作，例如更新 UI 状态，或者记录拖拽开始时的时间等。onDragEnd：在拖拽结束时调用。可以根据拖拽结束的位置来执行不同的操作，比如更新模型数据、界面重绘等。onDraggableCanceled：当拖拽操作被取消时调用，例如当拖拽控件未被放置到DragTarget中。你可以使用这个回调恢复控件的状态，或者清除一些临时的数据。
5. 总结
Draggable是 Flutter 中实现拖拽功能的核心控件，可以创建可拖拽的控件并将其与DragTarget配合使用，实现丰富的拖拽交互。- 它支持拖拽过程中控件状态的变化，如显示拖拽的反馈内容、替代显示、拖拽过程中展示的内容等。
- 通过回调函数如
onDragStarted、onDragEnd和onDraggableCanceled，你可以在不同的拖拽阶段进行更多定制化的操作。
结束语 Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！
