拖拽组件包含 Draggable 、LongPressDraggable 和 DragTarget。

Draggable、LongPressDraggable 为可拖拽的组件，LongPressDraggable 继承自Draggable，因此用法和 Draggable 完全一样，唯一的区别就是 LongPressDraggable 触发拖动的方式是长按，而 Draggable 触发拖动的方式是按下。

DragTarget 为拖拽组件的目的地组件。

Draggable

定义如下：

  1. Draggable({
  2.   Key key,
  3.   @required this.child,    // 原始组件
  4.   @required this.feedback,    // 拖拽中，临时的显示一个随拖拽运动的组件，拖拽结束后消失
  5.   this.data,    //和DragTarget配合使用，当用户将控件拖动到DragTarget时此数据会传递给DragTarget。
  6.   this.axis,    //控制拖动的方向。如只允许垂直拖动 axis: Axis.vertical,
  7.   this.childWhenDragging,    //拖拽中，控制原始组件显示其他样式
  8.   this.feedbackOffset = Offset.zero,
  9.   this.dragAnchor = DragAnchor.child,
  10.   this.affinity,
  11.   this.maxSimultaneousDrags,
  12.   this.onDragStarted,    //开始拖动时回调。    onDragStarted: (){}
  13.   this.onDraggableCanceled,    //未拖动到DragTarget控件上时回调。 onDraggableCanceled: (Velocity velocity, Offset offset){}
  14.   this.onDragEnd,    //拖动结束时回调。    onDragEnd: (DraggableDetails details){}
  15.   this.onDragCompleted,    //拖动到DragTarget控件上时回调。    onDragCompleted: (){}
  16.   this.ignoringFeedbackSemantics = true,
  17. })

简单使用

asdf.gif

  1. Draggable(
  2.   // 原始组件
  3.   child: Container(
  4.     width: 100,
  5.     height: 100,
  6.     color: Colors.red,
  7.     child: Text('原始组件'),
  8.   ),
  9.   //拖拽中，控制原始组件显示其他样式
  10.   childWhenDragging: Container(
  11.     height: 100,
  12.     width: 100,
  13.     color: Colors.grey,
  14.     child: Text('原始组件 改变样式'),
  15.   ),
  16.   // 拖拽中，临时的显示一个随拖拽运动的组件，拖拽结束后消失
  17.   feedback: Container(
  18.     width: 100,
  19.     height: 100,
  20.     color: Colors.red.withOpacity(0.3),
  21.     child: Text('拖拽中'),
  22.   ),
  23. ),

DragTarget

DragTarget就像他的名字一样，指定一个目的地，Draggable组件可以拖动到此控件。定义如下：

  1. DragTarget({
  2.   Key key,
  3.   @required this.builder,
  4.   //Widget Function(BuildContext context, List<T> candidateData, List<dynamic> rejectedData);
  5.   this.onWillAccept,
  6.   this.onAccept,
  7.   this.onAcceptWithDetails,
  8.   this.onLeave,
  9.   this.onMove,
  10. })

当onWillAccept返回true时， candidateData参数的数据是Draggable的data数据。
当onWillAccept返回false时， rejectedData参数的数据是Draggable的data数据。

DragTarget有几个回调，说明如下：

  • onWillAccept：拖到该控件上时调用，需要返回true或者false，返回true，松手后会回调onAccept，否则回调onLeave。
  • onAccept：onWillAccept返回true时，用户松手后调用。
  • onLeave：onWillAccept返回false时，用户松手后调用。
  • onAcceptWithDetails：精准下落位置回调，onWillAccept返回true时，用户松手后调用。

示例

asdf.gif

  1. \import 'package:flutter/cupertino.dart';
  2. import "package:flutter/material.dart";
  3. import 'package:app1/coms/base/empty_null/empty_null.dart';
  5. class TestPage extends StatefulWidget {
  6.   @override
  7.   _TestPageState createState() => _TestPageState();
  8. }
  10. class _TestPageState extends State<TestPage> {
  11.   var _dragData;
  13.   @override
  14.   Widget build(BuildContext context) {
  15.     return Scaffold(
  16.       appBar: EmptyNull.appBar(),
  17.       body: Container(
  18.         width: double.infinity,
  19.         child: Column(
  20.           children: [
  21.             Draggable(
  22.               data: Color(0x000000FF),
  23.               child: Container(
  24.                 width: 100,
  25.                 height: 100,
  26.                 color: Colors.red,
  27.                 child: Text('原始组件'),
  28.               ),
  29.               feedback: Container(
  30.                 width: 100,
  31.                 height: 100,
  32.                 color: Colors.red.withOpacity(0.3),
  33.                 child: Text('拖拽中'),
  34.               ),
  35.             ),
  37.             SizedBox(height: 200),
  39.             DragTarget<Color>(
  40.               builder: (context, List<Color> candidateData, List<dynamic> rejectedData) {
  41.                 print('candidateData => $candidateData');
  42.                 print('rejectedData => $rejectedData');
  44.                 return Container(
  45.                   width: 100,
  46.                   height: 100,
  47.                   decoration: _dragData == null
  48.                       ? BoxDecoration(
  49.                           border: Border.all(color: Colors.red),
  50.                         )
  51.                       : BoxDecoration(
  52.                           color: Colors.red,
  53.                         ),
  54.                   child: Text('目标'),
  55.                 );
  56.               },
  57.               onWillAccept: (Color data) {
  58.                 print('onWillAccept => $data');
  59.                 return true;
  60.               },
  61.               onAccept: (Color data) {
  62.                 setState(() {
  63.                   _dragData = data;
  64.                 });
  65.                 print('onAccept => $data');
  66.               },
  67.               onLeave: (Object data) {
  68.                 print('onLeave: => $data');
  69.               },
  70.               onAcceptWithDetails: (DragTargetDetails<Color> details) {
  71.                 print('onAcceptWithDetails => ${details.offset}');
  72.               },
  73.             ),
  74.           ],
  75.         ),
  76.       ),
  77.     );
  78.   }
  79. }

官方示例

拖拽组件 - 图3

  1. import 'dart:ui' as ui;
  3. import 'package:flutter/material.dart';
  5. const _strokeWidth = 8.0;
  7. class DragTargetDetailsExample extends StatefulWidget {
  8.   @override
  9.   _DragTargetDetailsExampleState createState() =>
  10.       _DragTargetDetailsExampleState();
  11. }
  13. class _DragTargetDetailsExampleState extends State<DragTargetDetailsExample> {
  14.   static const _feedbackSize = Size(100.0, 100.0);
  15.   static const _padding = 16.0;
  17.   static final _decoration = BoxDecoration(
  18.     border: Border.all(
  19.       color: Colors.blue,
  20.       width: _strokeWidth,
  21.     ),
  22.     borderRadius: BorderRadius.circular(12),
  23.   );
  25.   Offset _lastDropOffset;
  26.   int _lastDropIndex;
  28.   Widget _buildSourceRowChild(int index) => Expanded(
  29.       child: Padding(
  30.           padding: EdgeInsets.all(_padding),
  31.           child: Draggable<int>(
  32.               data: index,
  33.               dragAnchor: DragAnchor.pointer,
  34.               feedback: Transform.translate(
  35.                   offset: Offset(
  36.                       -_feedbackSize.width / 2.0, -_feedbackSize.height / 2.0),
  37.                   child: Container(
  38.                       decoration: _decoration,
  39.                       width: _feedbackSize.width,
  40.                       height: _feedbackSize.height)),
  41.               child: Container(
  42.                   decoration: _decoration,
  43.                   child: Column(
  44.                       mainAxisAlignment: MainAxisAlignment.center,
  45.                       children: [
  46.                         Text('drag me'),
  47.                         Text('$index', style: TextStyle(fontSize: 32.0))
  48.                       ])))));
  50.   void _handleAcceptWithDetails(
  51.       BuildContext dragTargetContext, DragTargetDetails details) {
  52.     // Convert global to local coordinates.
  53.     RenderBox renderBox = dragTargetContext.findRenderObject();
  54.     final localOffset = renderBox.globalToLocal(details.offset);
  55.     setState(() {
  56.       _lastDropOffset = localOffset;
  57.       _lastDropIndex = details.data;
  58.     });
  59.   }
  61.   Widget _buildDragTargetChild() => Padding(
  62.       padding: EdgeInsets.all(_padding),
  63.       child: Container(
  64.           decoration: _decoration,
  65.           // Note use of builder to get a context for the [DragTarget] which is
  66.           // available to pass to [_handleAcceptWithDetails].
  67.           child: Builder(
  68.               builder: (targetContext) => DragTarget<int>(
  69.                   builder: (_, candidateData, __) => Container(
  70.                       color: candidateData.isNotEmpty
  71.                           ? Color(0x2200FF00)
  72.                           : Color(0x00000000),
  73.                       child: CustomPaint(
  74.                           painter: _Painter(_lastDropOffset, _lastDropIndex))),
  75.                   onAcceptWithDetails: (details) =>
  76.                       _handleAcceptWithDetails(targetContext, details)))));
  78.   @override
  79.   Widget build(BuildContext context) {
  80.     return Scaffold(
  81.         appBar: AppBar(),
  82.         body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
  83.           Expanded(
  84.               flex: 1,
  85.               child: Row(
  86.                   children: List<Widget>.generate(3, _buildSourceRowChild))),
  87.           Expanded(flex: 4, child: _buildDragTargetChild())
  88.         ]));
  89.   }
  90. }
  92. class _Painter extends CustomPainter {
  93.   static final _diameter = 24.0;
  95.   static final _linePaint = Paint()
  96.     ..style = PaintingStyle.stroke
  97.     ..strokeWidth = _strokeWidth
  98.     ..color = Colors.blue;
  100.   static final _whiteFillPaint = Paint()
  101.     ..style = PaintingStyle.fill
  102.     ..color = Colors.white;
  104.   static final _blueFillPaint = Paint()
  105.     ..style = PaintingStyle.fill
  106.     ..color = Colors.blue;
  108.   final Offset _offset;
  109.   final int _index;
  111.   _Painter(this._offset, this._index);
  113.   @override
  114.   void paint(Canvas canvas, Size size) {
  115.     if (_offset == null || _index == null) return;
  116.     canvas.drawLine(
  117.         Offset(_offset.dx, 0.0), Offset(_offset.dx, size.height), _linePaint);
  118.     canvas.drawLine(
  119.         Offset(0.0, _offset.dy), Offset(size.width, _offset.dy), _linePaint);
  121.     canvas.drawCircle(_offset, _diameter + _strokeWidth, _blueFillPaint);
  122.     canvas.drawCircle(_offset, _diameter, _whiteFillPaint);
  124.     final paragraphBuilder =
  125.         ui.ParagraphBuilder(ui.ParagraphStyle(textAlign: TextAlign.center))
  126.           ..pushStyle(ui.TextStyle(
  127.               fontStyle: FontStyle.normal,
  128.               color: Colors.blue,
  129.               fontSize: _diameter))
  130.           ..addText('$_index');
  131.     final paragraph = paragraphBuilder.build();
  132.     paragraph.layout(ui.ParagraphConstraints(width: _diameter));
  133.     canvas.drawParagraph(
  134.         paragraph, _offset - Offset(_diameter / 2.0, _diameter / 2.0));
  135.   }
  137.   @override
  138.   bool shouldRepaint(_Painter oldPainter) => false;
  139. }