一个拖拽的目标区域，可接收Draggable组件的信息。可以获取拖拽时的回调。

相关组件

Draggable DragTarget

LongPressDraggable与DragTarget联用

  1.    <br />【child】 : 孩子   【Widget】<br />【feedback】 : 拖拽时的孩子   【Widget】<br />【axis】 : 拖动的轴   【Axis】<br />【data】 : 数据   【T】<br />【onDragStarted】 : 开始拖拽   【Function()】<br />【onDragEnd】 : 结束拖拽   【Function(DraggableDetails)】<br />【onDragCompleted】 : 拖拽完成   【Function()】<br />【onDraggableCanceled】 : 拖拽取消   【Function(Velocity,Offset)】<br />![107.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589449157028-fb8ca727-50f7-4c3e-887b-e9476a7647c8.gif#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=107.gif&originHeight=146&originWidth=403&size=94228&status=done&style=none&width=403)
  1. import 'package:flutter/material.dart';
  2. class CustomLongPressDraggable extends StatefulWidget {
  3.   @override
  4.   _CustomLongPressDraggableState createState() => _CustomLongPressDraggableState();
  5. }
  7. class _CustomLongPressDraggableState extends State<CustomLongPressDraggable> {
  8.   Color _color = Colors.grey;
  9.   String _info = 'DragTarget';
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Container(
  14.       child: Column(
  15.         children: <Widget>[
  16.           Wrap(
  17.             children: _buildColors(),
  18.             spacing: 10,
  19.           ),
  20.           SizedBox(height: 20,),
  21.           _buildDragTarget()
  22.         ],
  23.       ),
  24.     );
  25.   }
  27.   List<Widget> _buildColors() {
  28.     var colors = [
  29.       Colors.red,
  30.       Colors.yellow,
  31.       Colors.blue,
  32.       Colors.green,
  33.       Colors.orange,
  34.       Colors.purple,
  35.       Colors.cyanAccent
  36.     ];
  37.     return colors
  38.         .map(
  39.           (e) => LongPressDraggable<Color>(
  40.               onDragStarted: () => setState(() => _info = '开始拖拽'),
  41.               onDragEnd: (d) => setState(() => _info = '结束拖拽'),
  42.               onDragCompleted: () => _info = '拖拽完成',
  43.               onDraggableCanceled: (v, o) => _info = '拖拽取消',
  44.           child: Container(
  45.             width: 30,
  46.             height: 30,
  47.             alignment: Alignment.center,
  48.             child: Text(
  49.               colors.indexOf(e).toString(),
  50.               style: TextStyle(
  51.                   color: Colors.white, fontWeight: FontWeight.bold),
  52.             ),
  53.             decoration: BoxDecoration(color: e, shape: BoxShape.circle),
  54.           ),
  55.           data: e,
  56.           feedback: Container(
  57.             width: 25,
  58.             height: 25,
  59.             decoration: BoxDecoration(color: e, shape: BoxShape.circle),
  60.           )),
  61.     )
  62.         .toList();
  63.   }
  65.   Widget _buildDragTarget() {
  66.     return DragTarget<Color>(
  67.         onAccept: (data) => setState(() {
  68.           _info='onAccept';
  69.           _color = data;
  70.         }),
  71.         builder: (context, candidateData, rejectedData) => Container(
  72.             width: 150.0,
  73.             height: 50.0,
  74.             color: _color,
  75.             child: Center(
  76.               child: Text(
  77.                 _info,
  78.                 style: TextStyle(color: Colors.white),
  79.               ),
  80.             )));
  81.   }
  82. }