我正在Flutter中使用Draggable小部件,并且想将元素移动到父小部件内的任何位置。
我尝试了dragtarget小部件,但无法将其设置为父级小部件。我还尝试了onDraggableCanceledDraggable小部件的方法来获取偏移量,并将其应用于元素的新偏移量,但是它给了我与设备而不是与父容器的偏移量。
onDraggableCanceled
那么,什么是正确的方法呢?
只是在Flutter Web中在拖放画布上工作时遇到了同样的问题。最后,我通过为每个可拖动小部件插入GlobalKey并通过考虑包含的renderbox的大小(在等待渲染完成后,通过addPostFrameCallCall())来调整位置偏移来解决此问题。为了便于精确放置,我使用了Stack()/ Positioned()并将Draggable()放置在其中:
import 'package:flutter/material.dart'; class PositionedDraggableIcon extends StatefulWidget { final double top; final double left; PositionedDraggableIcon({Key key, this.top, this.left}) : super(key: key); @override _PositionedDraggableIconState createState() => _PositionedDraggableIconState(); } class _PositionedDraggableIconState extends State<PositionedDraggableIcon> { GlobalKey _key = GlobalKey(); double top, left; double xOff, yOff; @override void initState() { WidgetsBinding.instance.addPostFrameCallback(_afterLayout); top = widget.top; left = widget.left; super.initState(); } void _getRenderOffsets() { final RenderBox renderBoxWidget = _key.currentContext.findRenderObject(); final offset = renderBoxWidget.localToGlobal(Offset.zero); yOff = offset.dy - this.top; xOff = offset.dx - this.left; } void _afterLayout(_) { _getRenderOffsets(); } @override Widget build(BuildContext context) { return Positioned( key: _key, top: top, left: left, child: Draggable( child: Icon(Icons.input), feedback: Icon(Icons.input), childWhenDragging: Container(), onDragEnd: (drag) { setState(() { top = drag.offset.dy - yOff; left = drag.offset.dx - xOff; }); }, ), ); } }
可以使用窗口小部件上下文本身来执行此操作,并避免使用GlobalKey,但这对我来说已经足够好了。