Question

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

例如：给定一些口袋妖怪的图像，根据它们的类型将它们分组。用户可以创建新的DragTarget来分组相似的神奇宝贝。

问题：

我目前正在将掉落的宠物小精灵添加到一个列表中并显示它。因此，我可以在所有DraggedTargets中看到相同的宠物小精灵。

like this

请观看此屏幕录像以查找问题： https://youtu.be/XnJv3LiGfic

我正在维护一个名为dragTargetList的小部件（DragTarget）的列表，并使用setState（）将列表再包装一个列表，以显示所有DragTargets。

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

如何在新的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) {},
  );
}

请帮助我

Answer 1

我已经解决了这个问题，采用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具有三个属性：

Builder
候选列表：悬停在目标上方的项目列表
拒绝列表：未放入目标中的项目列表

很明显，每个拖动目标都维护自己的候选列表。这就是答案。

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

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

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

请让我知道是否有人需要相同的代码！

感谢您的帮助！

如何通过按钮单击动态创建新列表？

2 个答案: