DragTarget是用于接受Draggable數(shù)據(jù)的Widget。
當Draggable被拖動到DragTarget上方并松手极阅，DragTarget會根據(jù)傳遞過來的數(shù)據(jù)判斷是否需要接受該數(shù)據(jù)耙替。DragTarget本身也是一個StatefulWidget，可以根據(jù)接收到的數(shù)據(jù)進行改變什往。
本例效果如下：
左側為Draggable，右側為DragTarget慌闭，當Draggable被拖動到DragTarget里别威，DragTarget會判斷是不是需要接收傳遞過來的數(shù)據(jù)，在接收后做相應的狀態(tài)改變驴剔。
同樣的省古，直接使用上次的主界面，把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有一個必傳參數(shù)以及三個函數(shù)參數(shù)
@required this.builder,
this.onWillAccept,
this.onAccept,
this.onLeave,
builder 顧名思義炒事，返回一個用于展示的Widget臀栈；
bool onWillAccept(data) 當Draggable被滑動到DragTarget上方時會調(diào)用,data為Draggable攜帶的數(shù)據(jù)源，根據(jù)條件判斷是否需要接受此數(shù)據(jù)挠乳，如果要接收权薯，則返回true；
onAccept(data) 當Draggable被滑動到DragTarget上方后松手睡扬，且onWillAccept函數(shù)返回true時會被調(diào)用盟蚣，可以在此處處理Widget的狀態(tài)變化；
onLeave(data) 當Draggable從DragTarget上方離開時會調(diào)用該方法卖怜。
那么我們創(chuàng)建一個DragTarget
因為要修改Widget的狀態(tài)屎开，所以使用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的時候 決定接收該數(shù)據(jù)马靠。
},
onAccept: (data) {
print("data = $data onAccept");
setState(() {
targetText = data;//接收該數(shù)據(jù)后修改文案內(nèi)容奄抽。
});
},
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),
),
);
},
);
}
}
創(chuàng)建了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并松手，會發(fā)現(xiàn)DragTarget的文案變化了妙啃，說明成功接收到了我們拖拽過來的數(shù)據(jù)档泽。
如果我們把MyDraggable的data改為null俊戳，我們在DragTarget的onWillAccept函數(shù)中判斷了如果是null，那么就不接收數(shù)據(jù)馆匿，因此改為null之后抑胎，拖動Draggable到DragTarget后文案不會發(fā)生變化。
