Flutter：在堆栈小部件中动态添加拖放小部件

Posted 2023-02-23

【中文标题】Flutter：在堆栈小部件中动态添加拖放小部件

【英文标题】：Flutter : Add Drag and drop anywhere widget in stack widget dynamically

【发布时间】：2020-04-08 16:30:28

【问题描述】：

我们如何在 Flutter 中动态添加拖放任意位置的小部件？ 这是我试图实现的。建议更改以解决问题或建议正确的实施方法。

我需要解决的问题是canvasItemObj.x 和canvasItemObj.y 变量正在根据dragUpdate 进行更新。但是小部件的位置没有更新。 （Positioned() 小部件的top 和 left 参数）

这是用于保存小部件及其属性的 CanvasItemProps 类。

class CanvasItemProps 
  Widget canvasItem;
  double x = 0, y = 0, dx, dy;
  double scale = 1;
  Color color;
  CanvasItemProps();
  CanvasItemProps.fromItem(this.canvasItem);

canvasItemProps 持有 CanvasItemProps 的列表

List<CanvasItemProps> canvasItemProps = [];

我有一个平面按钮，它 onPressed 执行以下操作：

var canvasItemObj = CanvasItemProps();
canvasItemProps.add(canvasItemObj);

canvasItemObj.canvasItem = Positioned(
                  left: canvasItemObj.x,
                  top: canvasItemObj.y,
                  child: GestureDetector(
                    child: Text(
                      addTextController.text,
                      textScaleFactor: 5,
                    ),
                    onVerticalDragUpdate: (dragDetails) 
                      setState(() 
                        canvasItemObj.y = dragDetails.localPosition.dy;
                        canvasItemObj.x = dragDetails.localPosition.dx;
                      );
                    ,

                  ));
              addTextController.text = "";
              setState(() );
            ,

在构建函数中有一个堆栈：

Stack(children:canvasItemProps.isEmpty()?
               Text("No Item"):
                getCanvasItem)

以下 getCanvasItem 函数返回要传递给 Stack 小部件的小部件列表

List<Widget> getCanvasItem() 
    List<Widget> list = [];

    for (int i = 0; i < canvasItemProps.length; i++) 
      list.add(canvasItemProps[i].canvasItem);
    
    return list;
  

另一方面，当我只处理一个未动态添加的小部件时，这很好用（x 和 y 是在作用域中声明的两个变量并初始化为 0。）

double x=0,y=0;

小部件如下：

Container(
            margin: EdgeInsets.fromLTRB(50, 100, 90, 100),
            color: Colors.yellow,
            child: Stack(
            children: <Widget>[
              Positioned(
            top: y,
            left: x,
            child: GestureDetector(
              onVerticalDragUpdate: (v)
                setState(() 
                  x = v.localPosition.dx;
                  y = v.localPosition.dy;
                );
              ,
              child:Text("Text"),
            )
          ),
            ],
          ),
          )

【参考方案1】：

问题是 Top 和 Left 参数是最终参数，因此您无法更改值。但是，您应该每次使用更新的值重新初始化定位的小部件。