Flutter：在 ListView 中动画项目删除

Posted 2023-02-23

【中文标题】Flutter：在 ListView 中动画项目删除

【英文标题】：Flutter: animate item removal in ListView

【发布时间】：2019-01-25 08:19:33

【问题描述】：

我正在从 Stream 构建一个 ListView。我需要动画删除和插入该列表，但不知道如何。

我看过 Flutter 的这个示例，但它与流没有任何关系：https://flutter.io/catalog/samples/animated-list/

非常感谢任何帮助:)

new StreamBuilder(

    stream: feed.stream, // this is a Stream<List<Product>>

    builder: (context, snapshot) 
      if (!snapshot.hasData)
        return const Text('Loading products');
      return new ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) 
            Product product = snapshot.data[index];
            return new ProductWidget(product);
          );
    );

【问题讨论】：

你试过Dismissible吗？

【参考方案1】：

作为 AnimatedList 的一般答案，您可以执行以下操作：

// Remove "Pig" from the list
int removeIndex = 2;

// remove the item from the data list backing the AnimatedList
String removedItem = _data.removeAt(removeIndex);

// This builder is just so that the animation has something
// to work with before it disappears from view since the original
// has already been deleted.
AnimatedListRemovedItemBuilder builder = (context, animation) 
  // A method to build the Card widget.
  return _buildItem(removedItem, animation);
;

// notify the AnimatedList that the item was removed
_listKey.currentState.removeItem(removeIndex, builder);

【讨论】：

你能提供完整的例子吗？这对我很有帮助。

@ParthBhanderi，我有一个更完整的帖子here。它在末尾包含完整的代码。

我读到在你的例子中你使用了动画列表，但在我的例子中我使用了可重新排序的列表。

请在答案中提供解决方案，而不是在外部链接中。