如何为使用 Flutter 中的 itemBuilder 生成的列表中的每个项目分配不同的键？答案

【问题标题】：How do I assign different keys to each item in a list generated using itemBuilder in Flutter?如何为使用 Flutter 中的 itemBuilder 生成的列表中的每个项目分配不同的键？
【发布时间】：2020-08-26 02:30:21
【问题描述】：

我一直在设计一个应用程序，用户在其中搜索一个术语并显示一个 GridView，其中包含与该术语相关的所有图像。所有这些图像都是由Draggable 制作的。

在同一页面的另一个GridView 中，我放置了40 个Dragtargets。因此，用户可以将搜索到的图像拖放到DragTargets 之一中，从而可以选择40 个图像。

问题是当我将一张图像拖到Dragtarget 网格时，所有 40 个dragtargets 都被同一张图像填满。我认为这是因为每个Dragtarget 都具有相同的密钥，因为它是在 itemBuilder 中生成的。但我不知道如何在生成每个Dragtarget 时为其设置不同的密钥。也希望在实现相同场景时使用替代解决方案！

可拖动图片的代码：

                SliverGrid(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 350,
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10),
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return Container(
                        child: LongPressDraggable<String>(
                          data: imageLinks[index],
                          feedback: Image(
                              image: NetworkImage(imageLinks[index])),
                          child: Image(
                              image: NetworkImage(imageLinks[index])),
                          onDragStarted: () {
                            panelController.close();
                          },
                        ),
                      );

GridView 和 DragTargets 的代码：

GridView.builder(
                  itemCount: 40,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 5,),
                itemBuilder: (context,index){
                    return Container(
                      padding: EdgeInsets.only(top:5,right:5,bottom:5,left:5),
                    child: DragTarget<String>(
                    builder: (context, List<String> candidateData, rejectedData) {
                    if (dragged == true) {
                    return Container(
                    height: 50.0,
                    width: 50.0,
                    child: Image(
                    image: NetworkImage(draggedImage),
                    ),
                    );
                    } else {
                    return Container(
                    height: 50.0,
                    width: 50.0,
                    color: Colors.yellow,
                    );
                    }
                    },
                    onWillAccept: (data) {
                    return true;
                    },
                    onAccept: (data) {
                    setState(() {
                    dragged = true;
                    draggedImage = data;
                    //panelController.open();
                    });
                }
                  ),
                  );}
              ),

【问题讨论】：

标签： android user-interface flutter dart flutter-layout

【解决方案1】：

问题是您对所有拖动目标元素使用单个变量。

让我用代码解释一下。

onAccept: (data) {
                    setState(() {
                    dragged = true;
                    draggedImage = data;
                    //panelController.open();
                    });
                }

在上面的代码中，您将拖动值设置为 true 并将 draggedImage 值设置为 true，因此每个小部件都使用相同的值构建。

我希望我能解决问题。

解决方案：

为了解决这个问题，你可以创建一个 bool 列表（如果你想让所有的 dragtarget 元素的 bool 值也不同）和 draggedImage 列表，同时为每个单独的元素保留 draggedImage，所以所有都不会改变当你换一个时。

【讨论】：