如何在 Flutter 中使用 Draggable 将元素拖动到 Stack 中？

Question

我有以下代码：

import 'package:flutter/material.dart';

class PScreen extends StatefulWidget {
  @override
  _PScreenState createState() => _PScreenState();
}

class _PScreenState extends State<PScreen> {
  double width = 70.0, height = 70.0;
  double _x = 0;
  double _y = 0;

  AppBar appBar;

  Widget circle() {
    return Container(
      width: width,
      height: height,
      child: Center(
        child: Text(
          "Drag",
          style: Theme.of(context).textTheme.headline,
        ),
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
      ),
    );
  }

  Widget draggable() {
    return Positioned(
      left: _x,
      top: _y,
      child:  Draggable(
          child: circle(),
          feedback: circle(),
          childWhenDragging: Container(),
          onDragEnd: (dragDetails) {
            setState(
              () {
                _x = dragDetails.offset.dx;
                // We need to remove offsets like app/status bar from Y
                _y = dragDetails.offset.dy -
                    appBar.preferredSize.height -
                    MediaQuery.of(context).padding.top;
              },
            );
          },
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    appBar = AppBar(
      title: Text('Drag'),
      leading: BackButton(onPressed: () {
        Navigator.pop(context, false);
      }),
    );
    return Scaffold(
      appBar: appBar,
      body: Stack(
        children: <Widget>[
          draggable(),
          circle(),
        ],
      ),
    );
  }
}

使用这段代码，我可以在屏幕上拖动一个圆圈，当我放置它时，圆圈会停留在我离开的位置，这就是我想要做的。我的问题是我需要在屏幕上画其他东西，比如画另一个圆圈。当我将其他元素放入 Stack 时，我无法再拖动我的可拖动圆圈。如果您删除 Stack 中的“circle()”，代码将工作，但对于 Stack 中的其他元素，它不起作用。

我该怎么做？谢谢。

Answer 1

您将第二个圆圈放在第一个圆圈之上，这就是它不起作用的原因。相反，用位置小部件包裹它并正确对齐第二个圆圈，这样您就可以毫无问题地与第一个圆圈交互。

  Positioned(
        left:0.0,
        bottom:0.0,
        child: circle()),

因此，您的完整代码如下所示

 class PScreen extends StatefulWidget {
  @override
  _PScreenState createState() => _PScreenState();
}

class _PScreenState extends State<PScreen> {
  double width = 70.0, height = 70.0;
  double _x = 0;
  double _y = 0;

  AppBar appBar;

  Widget circle() {
    return Container(
      width: width,
      height: height,
      child: Center(
        child: Text(
          "Drag",
          style: Theme.of(context).textTheme.headline,
        ),
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
      ),
    );
  }

  Widget draggable() {
    return Positioned(
      left: _x,
      top: _y,
      child:  Draggable(
          child: circle(),
          feedback: circle(),
          childWhenDragging: Container(),
          onDragEnd: (dragDetails) {
            setState(
              () {
                _x = dragDetails.offset.dx;
                // We need to remove offsets like app/status bar from Y
                _y = dragDetails.offset.dy -
                    appBar.preferredSize.height -
                    MediaQuery.of(context).padding.top;
              },
            );
          },
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    appBar = AppBar(
      title: Text('Drag'),
      leading: BackButton(onPressed: () {
        Navigator.pop(context, false);
      }),
    );
    return Scaffold(
      appBar: appBar,
      body: Stack(
        children: <Widget>[
          draggable(),
          Positioned(
            left:0.0,
            bottom:0.0,
            child: circle()),
        ],
      ),
    );
  }
}

如何在 Flutter 中使用 Draggable 将元素拖动到 Stack 中？

How to drag elements inside a Stack using Draggable in Flutter?

draggable

dart

flutter

flutter-layout

flutter-animation