Question

我正在尝试实现以下逻辑：

用户点击区域；
在指定的坐标处生成一个新的小部件；
用户可以将新的小部件拖动到新位置。

第1步和第2步运行良好，但是在第3步中，用户可以拖动小部件，但不会更改其位置

现在是这样的： https://media.giphy.com/media/h4Hhm5vchkcJi3IFqH/giphy.gif

代码：

class WidgetPaint extends StatefulWidget {
  WidgetPaint({this.imagefromcam});
  File imagefromcam;

  @override
  _WidgetPaintState createState() => _WidgetPaintState();
}

class _WidgetPaintState extends State<WidgetPaint> {
  GlobalKey _globalKey2 = new GlobalKey();
  Offset locationPoints;
  var commentWidgets = List<Widget>();
  var btn;

  @override
  void initState() {
    super.initState();
    locationPoints = Offset(100.0, 100.0);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 800.0,
      height: 500.0,
      child: RepaintBoundary(
          key: _globalKey2,
          child: Stack(
              children: <Widget>[

                    GestureDetector(
                      onTapUp: (TapUpDetails detail) {
                        setState(() {
                          RenderBox _object = context.findRenderObject();
                          locationPoints =
                              _object.globalToLocal(detail.globalPosition);

                          print("locpoints: $locationPoints");

                          addButton();
                        });
                      },
                  ] +
                  commentWidgets)),
    );
  }

  Widget dragButton() {
    return RawMaterialButton(
      onPressed: () {},
      child: new Icon(
        Icons.pause,
        color: Colors.blue,
        size: 15.0,
      ),
      shape: new CircleBorder(),
      fillColor: Colors.white,
    );
  }

  void addButton() {
    btn = new Positioned(
        left: locationPoints.dx,
        top: locationPoints.dy,
        child: Draggable(
          child: dragButton(),
          feedback: dragButton(),
          onDraggableCanceled: (Velocity velocity, Offset offset) {
            setState(() {
              print("Location points: $locationPoints");
              locationPoints = offset;
            });
          },
        ));

    setState(() {
      commentWidgets.add(btn);
    });
  }

如何更改可拖动小部件的位置？

更新如果我删除GestureDetector并将可拖动的窗口小部件直接放置到堆栈中，一切正常，但是在那种情况下，我无法动态添加新的窗口小部件

Widget build(BuildContext context) {
    return Container(
      width: 800.0,
      height: 500.0,
      child: RepaintBoundary(
          key: _globalKey2,
          child: Stack(
              children: <Widget>[
                    Positioned(
                      left: 100.0,
                      height: 50.0,
                      child: Text(locationPoints.dx.toString()),
                    ),
                    Positioned(
                      left: 100.0,
                      top: 20.0,
                      child: Text(locationPoints.dy.toString()),
                    ),
                    Positioned(
                        left: locationPoints.dx,
                        top: locationPoints.dy,
                        child: Draggable(
                          child: dragButton(),
                          feedback: dragButton(),
                          onDraggableCanceled:
                              (Velocity velocity, Offset offset) {
                            setState(() {
                              print("Location points: $locationPoints");
                              RenderBox _object = context.findRenderObject();
                              locationPoints = _object.globalToLocal(offset);
                            });
                          },
                        )),]

Answer 1

正如您自己在更新中提到的那样：GestureRecognizer使用用户输入（例如，拖动）。对于仅注册用户输入的情况，可以使用Listener小部件。它具有与GestureRecognizer相同的回调，但不会消耗它。

可拖动的小部件不会更改其位置

1 个答案: