Flutter中Draggable结合DragTarget使用

DragTarget是用于接受Draggable数据的Widget。

当Draggable被拖动到DragTarget上方并松手，DragTarget会根据传递过来的数据判断是否需要接受该数据。DragTarget本身也是一个StatefulWidget，可以根据接收到的数据进行改变。

本例效果如下：

左侧为Draggable，右侧为DragTarget，当Draggable被拖动到DragTarget里，DragTarget会判断是不是需要接收传递过来的数据，在接收后做相应的状态改变。

Draggable2.gif

同样的，直接使用上次的主界面，把Scaffold的body替换一下。

void main() => runApp(new MyApp());

///用于展示Demo的界面，其中的MaterialApp、ThemeData、AppBar都是不必要的，只是稍微美观一点。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text("DraggableDemo"),
          ),
//          body: MyDraggable()),
          body: Drag2TargetPage()),//此处是测试的实例
    );
  }
}

DragTarget有一个必传参数以及三个函数参数

@required this.builder,
this.onWillAccept,
this.onAccept,
this.onLeave,

builder 顾名思义，返回一个用于展示的Widget；
bool onWillAccept(data) 当Draggable被滑动到DragTarget上方时会调用,data为Draggable携带的数据源，根据条件判断是否需要接受此数据，如果要接收，则返回true；
onAccept(data) 当Draggable被滑动到DragTarget上方后松手，且onWillAccept函数返回true时会被调用，可以在此处处理Widget的状态变化；
onLeave(data) 当Draggable从DragTarget上方离开时会调用该方法。

那么我们创建一个DragTarget

因为要修改Widget的状态，所以使用StatefulWidget。

class MyDragTarget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyDragTargetState();
}
class _MyDragTargetState extends State<MyDragTarget> {
  var targetText = "Target";//用于显示的文案
  @override
  Widget build(BuildContext context) {
    return DragTarget(
      onWillAccept: (data) {
        print("data = $data onWillAccept");
        return data != null;//当Draggable传递过来的dada不是null的时候 决定接收该数据。
      },
      onAccept: (data) {
        print("data = $data onAccept");
        setState(() {
          targetText = data;//接收该数据后修改文案内容。
        });
      },
      onLeave: (data) {
        print("data = $data onLeave");//我来了 我又走了
      },
      builder: (context, candidateData, rejectedData) {
        //这是DragTarget实际展示给用户看到的样子
        return Container(
          width: 150.0,
          height: 150.0,
          color: Colors.blue[500],
          child: Center(
            child: Text(targetText),
          ),
        );
      },
    );
  }
}

创建了DragTarget之后，我们把Draggable和DragTarget放到一起试试，使用Row存放Draggable和DragTarget。

class Drag2TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        MyDraggable(
          data: '哈哈哈',
//          data: null,
        ),
        MyDragTarget()
      ],
    );
  }
}

当我们拖动Draggable到DragTarget并松手，会发现DragTarget的文案变化了，说明成功接收到了我们拖拽过来的数据。
如果我们把MyDraggable的data改为null，我们在DragTarget的onWillAccept函数中判断了如果是null，那么就不接收数据，因此改为null之后，拖动Draggable到DragTarget后文案不会发生变化。

以上，就是一个Draggable拖拽数据到DragTarget并刷新UI的例子。嘻嘻~