如何在Flutter中使用Draggable在堆栈内拖动元素

Question

我有以下代码：

import 'package:flutter/material.dart';
class PScreen extends StatefulWidget {
@override
_PScreenState createState() => _PScreenState();
}
class _PScreenState extends State<PScreen> {
double width = 70.0, height = 70.0;
double _x = 0;
double _y = 0;
AppBar appBar;
Widget circle() {
return Container(
width: width,
height: height,
child: Center(
child: Text(
"Drag",
style: Theme.of(context).textTheme.headline,
),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
);
}
Widget draggable() {
return Positioned(
left: _x,
top: _y,
child:  Draggable(
child: circle(),
feedback: circle(),
childWhenDragging: Container(),
onDragEnd: (dragDetails) {
setState(
() {
_x = dragDetails.offset.dx;
// We need to remove offsets like app/status bar from Y
_y = dragDetails.offset.dy -
appBar.preferredSize.height -
MediaQuery.of(context).padding.top;
},
);
},
),
);
}
@override
Widget build(BuildContext context) {
appBar = AppBar(
title: Text('Drag'),
leading: BackButton(onPressed: () {
Navigator.pop(context, false);
}),
);
return Scaffold(
appBar: appBar,
body: Stack(
children: <Widget>[
draggable(),
circle(),
],
),
);
}
}

有了这个代码，我可以在屏幕上拖动一个圆圈，当我放置它时，这个圆圈会停留在我留下的位置，这就是我想做的。我的问题是，我需要在屏幕上画其他东西，比如画另一个圆圈。当我把其他元素放在堆栈中时，我再也不能拖动我的可拖动圆了。如果删除"；circle(("；在Stack中，代码可以工作，但对于Stack中的其他元素，它不起作用。

我该怎么做？非常感谢。

Answer 1

您将第二个圆放在第一个圆的顶部，这就是为什么它不起作用。相反，用位置小部件将其包裹起来，并正确对齐第二个圆，这样您就可以毫无问题地与第一个圆进行交互。

Positioned(
left:0.0,
bottom:0.0,
child: circle()),

所以，你的完整代码看起来像

class PScreen extends StatefulWidget {
@override
_PScreenState createState() => _PScreenState();
}
class _PScreenState extends State<PScreen> {
double width = 70.0, height = 70.0;
double _x = 0;
double _y = 0;
AppBar appBar;
Widget circle() {
return Container(
width: width,
height: height,
child: Center(
child: Text(
"Drag",
style: Theme.of(context).textTheme.headline,
),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
);
}
Widget draggable() {
return Positioned(
left: _x,
top: _y,
child:  Draggable(
child: circle(),
feedback: circle(),
childWhenDragging: Container(),
onDragEnd: (dragDetails) {
setState(
() {
_x = dragDetails.offset.dx;
// We need to remove offsets like app/status bar from Y
_y = dragDetails.offset.dy -
appBar.preferredSize.height -
MediaQuery.of(context).padding.top;
},
);
},
),
);
}
@override
Widget build(BuildContext context) {
appBar = AppBar(
title: Text('Drag'),
leading: BackButton(onPressed: () {
Navigator.pop(context, false);
}),
);
return Scaffold(
appBar: appBar,
body: Stack(
children: <Widget>[
draggable(),
Positioned(
left:0.0,
bottom:0.0,
child: circle()),
],
),
);
}
}