使可拖动在取消时不返回

Question

我正在尝试创建一个可以在屏幕上拖动的可拖动容器。我面临的问题是 Draggable 总是返回到它的 prevouis 位置.https：//i.stack.imgur.com/r4PTH.jpg 那么，如何创建停留在手指左边位置的可拖动。

Answer 1

可以使用onDraggableCanceled属性来更改位置。

我希望以下示例能清除您的想法。

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double width = 100.0, height = 100.0;
Offset position;
@override
void initState() {
super.initState();
position = Offset(0.0, height - 20);
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: position.dx,
top: position.dy - height + 20,
child: Draggable(
child: Container(
width: width,
height: height,
color: Colors.blue,
child: Center(
child: Text(
"Drag",
style: Theme.of(context).textTheme.headline,
),
),
),
feedback: Container(
child: Center(
child: Text(
"currently dragging",
style: Theme.of(context).textTheme.headline,
),
),
color: Colors.blue[300],
width: width,
height: height,
),
onDraggableCanceled: (Velocity velocity, Offset offset) {
setState(() => position = offset);
},
),
),
],
);
}
}