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

Posted 2023-02-23

【中文标题】从列表中删除项目后，Flutter Slidable 保持打开状态

【英文标题】：Flutter Slidable stays open after item is removed from list

【发布时间】：2021-09-23 16:55:37

【问题描述】：

我在 ListView 中使用 Slidable，因此我可以删除项目。问题是，如果我从列表中删除一个项目，新项目的滑动打开。这显然不是我们想要的行为。这是一个Screenvideo，以便更好地理解。

我的列表是一个 AnimatedList：

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

这是我的 Slidable：

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

AnimatedList 让它变得更加棘手，所以如果您需要更多信息，请告诉我！我该如何解决这个问题？

【参考方案1】：

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

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

【讨论】：

感谢您的回答！我对颤动很陌生，所以如何添加键？ :D

nvm，我明白了：key: Key(memory.description), 在 Slidable 中添加这个修复了它！谢谢人:)

@Chris 我还是把它添加到了我的答案中:)