一尘不染

如何在Flutter中通过拖放将元素移动到父容器内的任何位置?

flutter

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

我尝试了dragtarget小部件,但无法将其设置为父级小部件。我还尝试了onDraggableCanceledDraggable小部件的方法来获取偏移量,并将其应用于元素的新偏移量,但是它给了我与设备而不是与父容器的偏移量。

那么,什么是正确的方法呢?


阅读 199

收藏
2020-08-13

共1个答案

一尘不染

只是在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,但这对我来说已经足够好了。

2020-08-13