如何在Flutter中拖放将元素移动到父容器内的任何位置？ [英] How to move element anywhere inside parent container with drag and drop in Flutter?

问题描述

我正在Flutter中使用Draggable小部件，我想将元素移动到父小部件内的任何位置。

I'm using the Draggable widget in Flutter, and I want to move my element anywhere inside a parent widget.

我尝试了dragtarget小部件，但我无法请勿将其设置为我的父窗口小部件。我还尝试了Draggable小部件的 onDraggableCanceled 方法来获取偏移量，并将其应用于元素的新偏移量，但是它给了我与设备的偏移量，而不是从父容器。

I tried the dragtarget widget, but I couldn't set it to my parent widget. I also tried the onDraggableCanceled method of the Draggable widget for getting the offset, and applied it for the new offset of the element, but it gives me the offset from the device, not from the parent container.

那么，这样做的正确方法是什么？

So, what is the right way of doing this?

推荐答案

在Flutter Web中使用拖放式画布工作时遇到了同样的问题。最后，我通过为每个可拖动小部件插入GlobalKey并通过考虑包含的renderbox的大小（在等待渲染完成之后，通过addPostFrameCallCall（））来调整位置偏移来解决此问题。为了便于精确放置，我使用了Stack（）/ Positioned（）并将Draggable（）放置在其中：

Just ran into the same problem working on a drag-and-drop canvas in Flutter Web. I ended up working around this by inserting a GlobalKey for each of the draggable widgets and adjusting the placement offsets by accounting for the size of the containing renderbox (after waiting for the rendering to complete, via the addPostFrameCallback()). In order to facilitate precise placement, I used a Stack()/Positioned() and placed the Draggable() within this:

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，但这对我来说足够好了。

It's probably possible to do this with the widget context itself and avoid the GlobalKey, but this works well enough for me.

这篇关于如何在Flutter中拖放将元素移动到父容器内的任何位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！