[英]Flutter : Add Drag and drop anywhere widget in stack widget dynamically
How can we dynamically add drag and drop anywhere widget in flutter?我们如何在flutter中动态添加拖放小部件? Here is what I tried to implement.
这是我试图实现的。 Suggest changes to solve the problem or suggest the proper method to implement it.
建议更改以解决问题或建议实施它的正确方法。
The problem I need to solve is that the canvasItemObj.x and canvasItemObj.y variables are updating according to t the dragUpdate.我需要解决的问题是canvasItemObj.x 和canvasItemObj.y 变量正在根据dragUpdate 进行更新。 But the position of the widget is not updating.
但是小部件的位置没有更新。 ( top and left parameters of the Positioned() widget )
( Positioned() 小部件的顶部和左侧参数)
Here is the CanvasItemProps class for holding a widget and its properties.这是用于保存小部件及其属性的CanvasItemProps类。
class CanvasItemProps {
Widget canvasItem;
double x = 0, y = 0, dx, dy;
double scale = 1;
Color color;
CanvasItemProps();
CanvasItemProps.fromItem(this.canvasItem);
}
canvasItemProps holds the list of CanvasItemProps canvasItemProps保存CanvasItemProps的列表
List<CanvasItemProps> canvasItemProps = [];
I have a flatbutton which onPressed execute the following:我有一个平面按钮,它 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(() {});
},
In build function there is a Stack:在构建函数中有一个堆栈:
Stack(children:canvasItemProps.isEmpty()?
Text("No Item"):
getCanvasItem)
The following getCanvasItem function returns the list of widget to pass to the Stack widget以下getCanvasItem函数返回要传递给 Stack 小部件的小部件列表
List<Widget> getCanvasItem() {
List<Widget> list = [];
for (int i = 0; i < canvasItemProps.length; i++) {
list.add(canvasItemProps[i].canvasItem);
}
return list;
}
On the other hand, this works fine when I am dealing with only one widget that is not dynamically added(x and y are two variables declared in the scope and are initialized to 0.)另一方面,当我只处理一个不是动态添加的小部件时,这很好用(x 和 y 是在作用域中声明的两个变量,并被初始化为 0。)
double x=0,y=0;
widget is as follows:小部件如下:
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"),
)
),
],
),
)
The issue is the Top and Left parameters are final so you cant change the values.问题是 Top 和 Left 参数是最终的,所以你不能改变这些值。 But instead, you should reinitialize the positioned widget each time with the updated values.
但是,您应该每次使用更新后的值重新初始化定位的小部件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.