如何使用Button click动态创建一个新列表？
我正在使用Flutter中的Draggable(图像)。其目的是提供一个按钮，单击该按钮将形成新的DragTarget，并且用户可以将图像拖动到拖动目标。在目标中拖动的图像列表将显示在相应的DragTarget中。
给出一些精灵小精灵的图片，根据它们的类型进行分组。用户可以创建新的DragTarget来分组类似的精灵宝可梦。
问题：
我目前正在添加拖放的精灵宝可梦在一个单一的列表，并显示它。因此，我可以在所有的DraggedTargets中看到相同的口袋妖怪。
请观看此问题的屏幕录制：https://youtu.be/XnJv3LiGfic
我维护了一个名为dragTargetList的小部件(DragTarget)列表，并通过使用setState()向列表中再添加一个小部件来包装该列表以显示所有的小部件。
每个DragTarget包含一个名为droppedImages的图像列表，用于维护放置在目标中的图像。
如何在创建新的DragTarget时创建一个新列表，并使每个DragTarget只显示其中放置的图像列表？
List<Widget> getDragTargetList=[];
List<String> droppedImages=[]; //tplaceholder, we need dynamic list instead of //this
Widget temp(){
return Column(
children: <Widget>[
Row(children:<Widget>[
Wrap( children: List.generate(imageList.length, (e) => Draggable(child:
Container(child: Image.network( imageList[e])),
feedback: Container(height:10, width:10, color: Colors.lightBlue,),
childWhenDragging: Container())
)),]),
IconButton(
icon: Icon(Icons.add),
onPressed: (){setState(){getDragTargetList.add(getDragTarget());}},
),
Wrap(children: List.generate(getDragTargetList.length, (e)=>getDragTargetList[e]),)
],
);
}
Widget getDragTarget(){
return DragTarget<String>(
builder: (BuildContext context, List<String> incoming, List rejected) {
return Container(
color: Colors.cyan,
child:
Wrap(
children: List.generate(droppedImages.length, (e)=> //need to create and maintain dynamic list here
Container(height: 20, width: 20, child:_getCircularAvatar(droppedImages[e]),)),
),
alignment: Alignment.center,
height: 80,
width: 200,
);
},
onWillAccept: (data){return true;},
//=> data == emoji,
onAccept: (data) {
setState(() {
droppedImages.add(data);
});
},
onLeave: (data) {},
);
}请帮我做一下
回答 2
Stack Overflow用户
发布于 2019-11-04 15:50:31
我已经解决了这个问题，采用列表而不是只使用列表，并使用索引进行管理。
注意：-我使用ListView而不是Wrap只是为了避免溢出问题。
看看这个。
List<List<String>> droppedImages = [];
int getDragTargetListLength = 0;
Widget temp() {
return Column(
children: <Widget>[
SizedBox(
height: 20,
),
Row(children: <Widget>[
Wrap(
children: List.generate(
imageList.length,
(e) => Draggable(
data: imageList[e],
child: Container(
width: 80,
height: 50,
child: Image.asset(
imageList[e],
),
),
feedback: Container(
width: 80,
height: 50,
child: Image.asset(
imageList[e],
),
),
childWhenDragging: Container(),
onDragCompleted: () {
print("drag completed");
},
),
),
),
]),
SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: IconButton(
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {
setState(() {
droppedImages.add([]);
getDragTargetListLength++;
});
},
),
),
SizedBox(
height: 20,
),
Container(
height: 150,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: getDragTargetListLength,
itemBuilder: (BuildContext context, int e) {
return getDragTarget(e);
},
),
),
],
);
}
Widget getDragTarget(int index) {
return DragTarget<String>(
builder: (BuildContext context, List<String> incoming, List rejected) {
return Container(
color: Colors.cyan,
margin: EdgeInsets.only(left: 10),
child: Wrap(
children: List.generate(
droppedImages[index].length,
(e) => //need to create and maintain dynamic list here
Container(
margin: EdgeInsets.only(left: 10),
height: 30,
width: 30,
child: _getCircularAvatar(droppedImages[index][e]),
)),
),
alignment: Alignment.center,
height: 150,
width: 200,
);
},
onWillAccept: (data) {
return true;
},
//=> data == emoji,
onAccept: (data) {
setState(() {
droppedImages[index].add(data);
});
},
onLeave: (data) {
print(data);
},
);
}Stack Overflow用户
发布于 2019-11-08 00:43:36
我再次阅读了文档，并理解了DragTarget有三个属性：
- Builder
- Candidate List:悬停在target
- Rejected list上方的项目列表:未拖放到目标
中的项目列表
显然，每个拖动目标都维护着自己的候选列表。这就是答案。
我刚创建了一个临时列表: temp，每次都会创建Drag Target，并将候选列表项添加到其中。
如果该项目存在于拒绝列表中，我使用setState将其从临时列表中删除
我在沟渠中维护DragTarget的索引和其中的项目。
如果有人需要同样的代码，请让我知道！
感谢您的帮助！
https://stackoverflow.com/questions/58686919
复制相似问题
腾讯云开发者
