接收器代碼：
import 'package:flutter/material.dart';
import 'draggable_widget.dart';
class DraggableDemo extends StatefulWidget {
DraggableDemo({Key key}) : super(key: key);
@override
_DraggableDemoState createState() => _DraggableDemoState();
}
class _DraggableDemoState extends State<DraggableDemo> {
Color _draggableColor = Colors.grey;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(//可重疊
children: <Widget>[
DraggableWidget(//發送控件
offset: Offset(80, 80),
widgetColor: Colors.orange,
),
DraggableWidget(
offset: Offset(200, 80),
widgetColor: Colors.red,
),
Center(//拖拽接收器
child: DragTarget(
onAccept: (Color color){//接收條件
_draggableColor = color;
}, builder: (context,candidateData,rejectedData){//固定寫法
return Container(//接收控件
width: 200,
height: 200,
color: _draggableColor,
);
},
),
)
],
),
);
}
}
發送器（拖拽器）代碼：
import 'package:flutter/material.dart';
class DraggableWidget extends StatefulWidget {
final Offset offset;
final Color widgetColor;
const DraggableWidget({Key key,this.offset,this.widgetColor}):super(key:key);
@override
_DraggableWidgetState createState() => _DraggableWidgetState();
}
class _DraggableWidgetState extends State<DraggableWidget> {
Offset offset = Offset(0.0, 0.0);
@override
void initState() {
super.initState();
offset = widget.offset;//取傳進來的offset
}
@override
Widget build(BuildContext context) {
return Positioned(
left: offset.dx,
top: offset.dy,
child: Draggable(//可拖動的組件
data: widget.widgetColor,//傳遞xxx給接收器 xxx此處為顏色 此處要和接收器的onAccept 相對應
child: Container(
width: 100.0,
height: 100.0,
color: widget.widgetColor,//傳遞過來的顏色
),
feedback: Container(
width: 120,
height: 120,
color: widget.widgetColor.withOpacity(0.5),//半透明
),//當拖動的時候的樣式
onDraggableCanceled: (Velocity velocity,Offset offset){
setState(() {
this.offset = offset;//拖動結束
});
},//拖拽完成
),
);
}
}
總結：
//拖拽控件
Draggable（
data:xxx //傳遞的數據 和 DragTarget 中的onAccept 相呼應
feedback：（） 拖拽時的樣式
onDraggableCanceled ：（）拖拽結束的樣式
）
DragTarget(
onAccept:(xxx){//拖拽接受條件
}，builder:(context,candidateData,rejectedData){
xxx //接受控件
}
)