从列表中删除项目后，Flutter Slidable 保持打开状态

Question

我在 ListView 中使用 Slidable，这样我就可以删除项目。问题是，如果我从列表中删除一个项目，新项目将可滑动打开。这显然不是理想的行为。这是一个屏幕视频，以便更好地理解。

\n

我的列表是一个 AnimatedList：

\n

\n`                       child: AnimatedList(\n                            padding: EdgeInsets.zero,\n                            shrinkWrap: true,\n                            key: listKey,\n                            initialItemCount: widget.month.memories.length,\n                            itemBuilder: (context, index, animation) {\n                              return slideIt(\n                                context,\n                                widget.month.memories[index],\n                                index,\n                                animation,\n                              );\n                            },\n                          ),`\n

\n

这是我的滑动：

\n

` Widget slideIt(\n    BuildContext context,\n    Memory memory,\n    int index,\n    animation,\n  ) {\n    return SlideTransition(\n      position: Tween<Offset>(\n        begin: const Offset(-1, 0),\n        end: Offset(0, 0),\n      ).animate(\n        CurvedAnimation(\n          parent: animation,\n          curve: Curves.easeIn,\n          reverseCurve: Curves.easeOut,\n        ),\n      ),\n      child: Slidable(\n        actionPane: SlidableDrawerActionPane(),\n        actionExtentRatio: 0.25,\n        movementDuration: Duration(milliseconds: 400),\n        child: Column(\n          children: [\n            MemoryTile(\n              memory: memory,\n              monthName: widget.month.name,\n              onTapped: () {\n                _removeMemoryAtIndex(index, memory);\n                print(\'tap on ${memory.description}\');\n              },\n            ),\n            SizedBox(\n              height: scaleWidth(20),\n            ),\n          ],\n        ),\n        secondaryActions: [\n          SlideAction(\n            closeOnTap: false,\n            color: AppColors.secondary,\n            onTap: () => {\n              _removeMemoryAtIndex(index, memory),\n            },\n            child: Column(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: [\n                Icon(\n                  CupertinoIcons.trash_fill,\n                  color: AppColors.primary,\n                  size: 30,\n                ),\n                SizedBox(\n                  height: scaleWidth(5),\n                ),\n                Text(\n                  \'L\xc3\xb6schen\',\n                  style: AppTextStyles.montserratH6SemiBold,\n                ),\n                SizedBox(\n                  height: scaleWidth(20),\n                ),\n              ],\n            ),\n          ),\n        ],\n      ),\n    );\n  }`\n

\n

AnimatedList 使它变得更加棘手，所以如果您需要更多信息，请告诉我！我怎样才能解决这个问题？

\n

Answer 1

您应该为您的滑动件分配一个键。当 Flutter 管理其状态时，它使用三棵树来完成：小部件树、元素树和渲染对象树。当一个小部件关闭时，flutter 尝试通过简单的类型相等来将其余小部件与相应的元素同步。所以，这就是您的应用程序如此运行的原因。Flutter 获取第一个剩余的 widget 和第一个元素，并比较它们是否具有相同的类型。如果有，则 Flutter 使用元素的状态来显示相应的渲染对象。元素树的最后一个元素将被删除。因此，您需要添加键，Flutter 还将使用它们以理想的方式同步小部件和元素。

每个 Flutter 小部件都有一个Key字段。您应该在创建小部件实例时分配它们。您可以使用一些实用程序类来生成这样的密钥 - 例如 ValueKey()、UniqueKey 等。或者，如果数据中有您自己的密钥，您也可以使用它。