Flutter教学目录持续更新中
Github源代码持续更新中
1.DragTarget介绍
拖拽目标组件
2.DragTarget属性
- builder：candidateData为onWillAccept回调为true时可接收的数据列表，rejectedData为onWillAccept回调为false时拒绝时的数据列表
- onWillAccept：当拖拽锚点进入DragTarget范围时回调，true时会将Data数据添加到candidateData列表中；false时会将Data数据添加到rejectedData列表中；
- onAccept：接收Data数据，只有onWillAccept返回true且拖拽结束时拖拽锚点位于DragTarget内才会回调
- onAcceptWithDetails：跟onAccept一样，只是多了Offset的属性
- onLeave：拖拽锚点进入DragTarget范围后再离开DragTarget范围时回调
- onMove：拖拽锚点进入DragTarget范围后在DragTarget范围内移动时回调
3.使用
_myText(String s) {
return Text(
s,
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DragTarget'),
),
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 10,
left: 10,
child: Draggable(
data: "aa",
child: Container(
color: Colors.blue,
width: 100,
height: 100,
child: _myText('aa'),
),
feedback: Container(
color: Colors.red,
width: 100,
height: 100,
child: _myText('aa'),
),
),
),
Positioned(
top: 10,
right: 10,
child: Draggable(
data: "bb",
child: Container(
color: Colors.blue,
width: 100,
height: 100,
child: _myText('bb'),
),
feedback: Container(
color: Colors.red,
width: 100,
height: 100,
child: _myText('bb'),
),
),
),
Positioned(
child: DragTarget(
builder: (BuildContext context, List candidateData,
List rejectedData) {
print('DragTarget builder');
Color c;
String s;
if (candidateData.isNotEmpty && candidateData.first == 'aa') {
c = Colors.amber;
s = '接收到aa';
} else if (rejectedData.isNotEmpty) {
c = Colors.grey;
s = '未接收到aa，接收为${rejectedData.first}';
} else {
s = '只接收aa';
c = Colors.cyan;
}
return Container(
color: c,
width: 100,
height: 100,
child: _myText(s),
);
},
onWillAccept: (s) {
print('onWillAccept $s');
if (s == 'aa') {
return true;
} else {
return false;
}
},
onAccept: (s) {
print('onAccept $s');
ToastUtil.showToast('成功接收到指定数据$s');
},
onAcceptWithDetails: (DragTargetDetails details) {
print('onAcceptWithDetails ${details.data}');
print('onAcceptWithDetails ${details.offset}');
},
onLeave: (s) {
print('onLeave $s');
},
onMove: (DragTargetDetails details) {
print('onMove ${details.data}');
print('onMove ${details.offset}');
},
),
),
],
),
),
);
}
未拖拽.png
拖拽aa，拖拽锚点未进入DragTarget.png
拖拽aa，拖拽锚点进入DragTarget.png
拖拽bb，拖拽锚点未进入DragTarget.png
拖拽bb，拖拽锚点进入DragTarget.png
下一节：Draggable组件之LongPressDraggable