如何使用按钮单击动态创建新列表？

Question

我正在 Flutter 中使用 Draggable(images)。目的是提供一个按钮，单击该按钮将形成新的 DragTarget，用户可以将图像拖动到拖动目标。在目标中拖动的图像列表将显示在相应的 DragTarget 中。

例如：给定一些口袋妖怪的图像，根据它们的类型对它们进行分组。用户可以创建新的 DragTarget 来对类似的 pokemon 进行分组。

问题：

我目前正在将掉落的口袋妖怪添加到一个列表中并显示它。因此，我可以在所有 DragTargets 中看到相同的口袋妖怪。

请观看此屏幕录像以了解该问题： https://youtu.be/XnJv3LiGfic

我正在维护一个名为 dragTargetList 的小部件 (DragTarget) 列表，并包装该列表以显示所有 DragTargets，方法是使用 setState() 向列表中添加一个。

每个 DragTarget 都包含一个名为 droppedImages 的图像列表，用于维护放置在目标中的图像。

如何在新的 DragTarget Creation 上创建一个新列表并以每个 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) {},
  );
}

请帮帮我

Answer 1

我已经解决了这个问题，通过使用 List 的 List 而不是 List 并使用索引来管理它。

注意：- 我使用 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);
      },
    );
  }

Answer 2

我又翻了一遍文档，了解到 DragTarget 有三个属性：

• 建设者
• 候选列表：悬停在目标上方的项目列表
• Rejected List：未放入目标的项目列表

显然，每个 Drag Target 都有自己的候选列表。这就是答案。

我刚刚创建了一个临时列表：temp，每次创建拖动目标并将候选列表项添加到其中时。

如果该项目存在于拒绝列表中，我使用 setState from temp 将其删除

我正在维护 DragTarget 的索引和其中的项目。

如果有人需要相同的代码，请告诉我！

感谢您的帮助！