我有一个带有3个定位小部件的堆栈,其中GestureDetector作为孩子。我可以拖动它们,但是我也想在单击后将其单击到前面。我试过在父窗口小部件中提出更改状态的调用,但这确实会交换受影响的窗口小部件位置。
这是完整的示例代码(它是脚手架中的主体。我们将不胜感激。
class DragBox extends StatefulWidget { final Offset startPosition; final Color color; final String label; final Function bringToTop; DragBox({ this.startPosition, this.color: const Color.fromRGBO(255, 255, 255, 1.0), this.label, this.bringToTop }); @override DragBoxState createState() => DragBoxState(); } class DragBoxState extends State<DragBox> { Offset position; Offset _startPos; @override void initState() { position = widget.startPosition; super.initState(); } @override Widget build(BuildContext context) { return Positioned( left: position.dx, top: position.dy, child: GestureDetector( onScaleStart: (details) { //Store start conditions _startPos = details.focalPoint; widget.bringToTop(widget); }, onScaleUpdate: (scaleDetails) { setState(() { position += scaleDetails.focalPoint - _startPos; _startPos = scaleDetails.focalPoint; }); }, child: _buildPart() )); } Widget _buildPart() { return Container( width: 100.0, height: 100.0, decoration: BoxDecoration( border: Border.all(color: Color.fromARGB(255, 0, 0, 0), width: 1.0), color: widget.color), child: Text( widget.label, style: TextStyle( color: Color.fromRGBO(255, 255, 255, 1.0), //decoration: TextDecoration.none, fontSize: 15.0, ), ), ); } } class WorkTable extends StatefulWidget { @override WorkTableState createState() => WorkTableState(); } class WorkTableState extends State<WorkTable> { List<DragBox> dragParts = []; @override void initState() { dragParts = []; //dragParts = []; dragParts.add(DragBox( startPosition: Offset(0.0, 0.0), color: Colors.red, label: "Box1", bringToTop: this.bringToTop, )); dragParts.add(DragBox( startPosition: Offset(50.0, 50.0), color: Colors.red, label: "Box2", bringToTop: this.bringToTop, )); dragParts.add(DragBox( startPosition: Offset(100.0, 100.0), color: Colors.blue, label: "Box3", bringToTop: this.bringToTop, )); super.initState(); } @override Widget build(BuildContext context) { for(DragBox d in dragParts){ print(d.label); } return Stack( children: dragParts, ); } void bringToTop(Widget widget) { setState(() { dragParts.remove(widget); dragParts.add(widget); }); } }
奇怪的是发生在这里
void bringToTop(Widget widget) { setState(() { dragParts.remove(widget); dragParts.add(widget); }); }
不仅改变深度,还交换位置
向GlobalKey您的小部件添加(或其他一些键)应该可以解决此问题:
GlobalKey
dragParts.add(DragBox( key: GlobalKey(), startPosition: Offset(0.0, 0.0), color: Colors.red, label: "Box1", bringToTop: this.bringToTop, )); dragParts.add(DragBox( key: GlobalKey(), startPosition: Offset(50.0, 50.0), color: Colors.red, label: "Box2", bringToTop: this.bringToTop, )); dragParts.add(DragBox( key: GlobalKey(), startPosition: Offset(100.0, 100.0), color: Colors.blue, label: "Box3", bringToTop: this.bringToTop, ));