DragTarget是用于接受Draggable数据的Widget。
当Draggable被拖动到DragTarget上方并松手，DragTarget会根据传递过来的数据判断是否需要接受该数据。DragTarget本身也是一个StatefulWidget，可以根据接收到的数据进行改变。
本例效果如下：
左侧为Draggable，右侧为DragTarget，当Draggable被拖动到DragTarget里，DragTarget会判断是不是需要接收传递过来的数据，在接收后做相应的状态改变。
同样的，直接使用上次的主界面，把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后文案不会发生变化。
