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

4ngedf3f 于 2023-11-21 发布在 Flutter

关注(0)|答案(2)|浏览(121)

我有以下代码：

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(),
        ],
      ),
    );
  }
}

字符串
有了这段代码，我可以在屏幕上拖动一个圆圈，当我把它放进去的时候，圆圈会停留在我离开的位置，这就是我想做的。我的问题是我需要在屏幕上画其他东西，比如画另一个圆圈。当我把其他元素放在堆栈里的时候，我不能再拖动我的可拖动的圆圈了。如果你在堆栈里删除“circle（）”，代码就可以工作了，但对于Stack中的其他元素，它不起作用。
我该怎么做？谢谢。

flutter

来源：https://stackoverflow.com/questions/64190344/how-to-drag-elements-inside-a-stack-using-draggable-in-flutter

2条答案

按热度按时间

fbcarpbf1#

你把第二个圆放在第一个圆的上面，这就是为什么它不起作用。相反，用一个位置小部件包裹它，并正确对齐第二个圆，这样你就可以毫无问题地与第一个圆交互。

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()),
        ],
      ),
    );
  }
}

型

赞(0）回复(0）举报 2023-11-21

a2mppw5e2#

我已经创建了解决这个问题的软件包Easy drag and drop

赞(0）回复(0）举报 2023-11-21