Draggable 可拖拽组件

可以让组件在界面上任意拖拽，可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。

相关组件

DragTarget LongPressDraggable

Draggable基本使用

   <br />【child】 : 孩子   【Widget】<br />【feedback】 : 拖拽时的孩子   【Widget】<br />【axis】 : 拖动的轴   【Axis】<br />![103.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589447644493-ed0c02c9-32f7-49f8-9b70-c4cbe047ee1f.gif#align=left&display=inline&height=376&margin=%5Bobject%20Object%5D&name=103.gif&originHeight=376&originWidth=403&size=233040&status=done&style=none&width=403)

import 'package:flutter/material.dart';
class CustomDraggable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var axis = [null, Axis.vertical, Axis.horizontal];
    return Wrap(
        spacing: 30,
        children: axis
            .map((e) => Draggable(
                  axis: e,
                  child: Container(
                    width: 30,
                    height: 30,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.blue, shape: BoxShape.circle),
                  ),
                  feedback: Container(
                    width: 30,
                    height: 30,
                    decoration: BoxDecoration(
                        color: Colors.red, shape: BoxShape.circle),
                  ),
                ))
            .toList());
  }
}

Draggable与DragTarget联用

   <br />【data】 : 数据   【T】<br />【onDragStarted】 : 开始拖拽   【Function()】<br />【onDragEnd】 : 结束拖拽   【Function(DraggableDetails)】<br />【onDragCompleted】 : 拖拽完成   【Function()】<br />【onDraggableCanceled】 : 拖拽取消   【Function(Velocity,Offset)】<br />【onChanged】 : 改变时回调   【Function(T)】<br />![104.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589447861376-affc0ec4-e3f7-44e6-838d-345eb216ba84.gif#align=left&display=inline&height=217&margin=%5Bobject%20Object%5D&name=104.gif&originHeight=217&originWidth=403&size=186665&status=done&style=none&width=403)

import 'package:flutter/material.dart';
class DraggablePage extends StatefulWidget {
  @override
  _DraggablePageState createState() => _DraggablePageState();
}

class _DraggablePageState extends State<DraggablePage> {
  Color _color = Colors.grey;
  String _info = 'DragTarget';

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Wrap(
            children: _buildColors(),
            spacing: 10,
          ),
          SizedBox(
            height: 20,
          ),
          _buildDragTarget()
        ],
      ),
    );
  }

  List<Widget> _buildColors() {
    var colors = [
      Colors.red,
      Colors.yellow,
      Colors.blue,
      Colors.green,
      Colors.orange,
      Colors.purple,
      Colors.cyanAccent
    ];
    return colors
        .map(
          (e) => Draggable<Color>(
          onDragStarted: () => setState(() => _info = '开始拖拽'),
          onDragEnd: (d) => setState(() => _info = '结束拖拽'),
          onDragCompleted: () => _info = '拖拽完成',
          onDraggableCanceled: (v, o) => _info = '拖拽取消',
          child: Container(
            width: 30,
            height: 30,
            alignment: Alignment.center,
            child: Text(
              colors.indexOf(e).toString(),
              style: TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
            ),
            decoration: BoxDecoration(color: e, shape: BoxShape.circle),
          ),
          data: e,
          feedback: Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(color: e, shape: BoxShape.circle),
          )),
    )
        .toList();
  }

  Widget _buildDragTarget() {
    return DragTarget<Color>(
        onLeave: (data) => print("onLeave: data = $data "),
        onAccept: (data) {
          print("onAccept: data = $data ");
          setState(() {
            _color = data;
          });
        },
        onWillAccept: (data) {
          print("onWillAccept: data = $data ");
          return data != null;
        },
        builder: (context, candidateData, rejectedData) => Container(
            width: 150.0,
            height: 50.0,
            color: _color,
            child: Center(
              child: Text(
                _info,
                style: TextStyle(color: Colors.white),
              ),
            )));
  }
}

Draggable其他使用

   <br />可以根据拖拽来处理一些事件。如删除、查询、弹框等<br />![105.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589447909194-aee62a2a-f242-406c-98b6-f7fcf0cf20ed.gif#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=105.gif&originHeight=146&originWidth=403&size=111484&status=done&style=none&width=403)

import 'package:flutter/material.dart';
class DeleteDraggable extends StatefulWidget {
  @override
  _DeleteDraggableState createState() => _DeleteDraggableState();
}

class _DeleteDraggableState extends State<DeleteDraggable> {
  List<Color> colors = [
    Colors.red,
    Colors.yellow,
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.purple,
    Colors.cyanAccent
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Wrap(
            children: _buildColors(),
            spacing: 10,
          ),
          SizedBox(
            height: 20,
          ),
          _buildDragTarget()
        ],
      ),
    );
  }

  Widget _buildDragTarget() {
    return DragTarget<int>(
        onAccept: (data) {
          setState(() {
            colors.removeAt(data);
          });
        },
        onWillAccept: (data) => data != null,
        builder: (context, candidateData, rejectedData) => Container(
            width: 50.0,
            height: 50.0,
            decoration:
            BoxDecoration(color: Colors.red, shape: BoxShape.circle),
            child: Center(
              child: Icon(Icons.delete_sweep, color: Colors.white),
            )));
  }

  List<Widget> _buildColors() => colors
      .map(
        (e) => Draggable<int>(
        child: Container(
          width: 30,
          height: 30,
          alignment: Alignment.center,
          child: Text(
            colors.indexOf(e).toString(),
            style:
            TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          decoration: BoxDecoration(color: e, shape: BoxShape.circle),
        ),
        data: colors.indexOf(e),
        feedback: Container(
          width: 25,
          height: 25,
          decoration: BoxDecoration(
              color: e.withAlpha(100), shape: BoxShape.circle),
        )),
  )
      .toList();
}