Flutter实现可拖拽操作Draggable

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 控件会自动执行以下操作：

1. 拖拽开始：当用户开始拖拽时，Draggable 控件会展示指定的 feedback，并且显示出原始控件的占位符（childWhenDragging）。
2. 拖拽过程：拖拽过程中，用户可以将控件在屏幕上拖动，通常会通过 onDragStarted 和 onDragEnd 回调来触发相应的逻辑。
3. 拖拽结束或取消：当拖拽对象被放置到 DragTarget 中，或者当用户取消拖拽时，Draggable 会触发 onDragEnd 或 onDraggableCanceled 回调。

---

3. 常见用法

示例 1：基本的拖拽控件

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget 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 {@overrideWidget 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的精彩世界！