Как создать новый список динамически с помощью нажатия кнопки?

Question

Я работаю с Draggable (изображения) в Flutter. Цель состоит в том, чтобы предоставить кнопку, при нажатии которой будет сформирован новый объект DragTarget, и пользователь сможет перетащить изображение к цели перетаскивания. Список изображений, перетаскиваемых в цель, будет отображаться в соответствующей DragTarget.

Например: учитывая несколько изображений покемонов, сгруппируйте их по типу. Пользователи могут создавать новые DragTarget для группировки похожих покемонов.

Проблема:

В настоящее время я добавляю отброшенного покемона в один список и отображаю его. Следовательно, я вижу одного и того же покемона во всех DraggedTargets.

, пожалуйста, просмотрите эту запись экрана для проблемы: https://youtu.be/XnJv3LiGfic

Я веду списоквиджеты (DragTarget) с именем dragTargetList и перенос списка для отображения всех DragTargets с помощью setState () для добавления еще одного в список.

Каждый DragTarget содержит список изображений с именем dropImages, сохраняющий изображения, сброшенные в цель.

Как создать новый список в новом 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

Я снова просмотрел документацию и понял, что DragTarget имеет три атрибута:

• Builder
• Список кандидатов: список элементов, парящих над целью
• Список отклоненных: список предметов, которые не были выброшены в цель

Очевидно, что каждая цель перетаскивания поддерживает свой собственный список кандидатов. Это был ответ.

Я только что создал временный список: temp, каждый раз, когда создавалась цель перетаскивания, и добавлял в нее элементы списка кандидатов.

Если элемент существовал в отклоненном списке, я удалил его с помощью setState из temp

Я поддерживаю индексы DragTarget и элементы в нем в канаве.

Пожалуйста, дайте мне знать, если кому-то нужен код для этого!

Спасибо за помощь!

Answer 2

Я решил проблему, взяв вместо списка только 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);
      },
    );
  }