flutter - Flutter中的动画ListView项目位置变化

Question

我有一个ListView它的排序取决于它的项目状态：Item模型对象有一个bool属性，isActive，并且所有Item具有 值的 strue都在所有具有 值的 s 之前排序false。点击一个项目会切换它的isActive状态。设置状态的逻辑不在列表本身中完成；相反，它是由一个 BLoC 执行的，它也知道如何对项目进行排序。结果，所有列表获得的List<Item>是正确排序的流。

目前，结果非常不和谐 - 被点击的项目从其位置消失并出现在列表中的其他位置，我想让它更平滑，比如可能为位置变化设置动画 - 类似于做什么ReorderableListView，但以编程方式。我不知道该怎么做，我开始搞砸了，AnimatedList但我不确定这是我用例的正确组件 - 它可以动画删除和添加，这不是我正在做的事情（我可以​​添加一个删除后立即添加，但这似乎很复杂）。

这是我到目前为止的代码（简化），它支持动画删除：

class ItemListWidget extends StatelessWidget {
  final items = [
    'Item A',
    'Item B',
    'Item C',
    'Item D',
    'Item E',
  ];

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      initialItemCount: items.length,
      itemBuilder: (context, index, animation) {
        final item = items[index];
        return ListTile(
          title: Text(item),
          onTap: () {
            final state = AnimatedList.of(context);
            state.removeItem(
              index,
              (context, animation) => SizeTransition(
                sizeFactor: animation,
                child: ListTile(title: Text(item)),
              ),
              // duration: const Duration(seconds: 5),
            );
            items.removeAt(index);
          },
        );
      },
    );
  }
}

它确实删除了该项目，当删除动画准备好时，我现在需要以某种方式在不同的索引处再次添加该项目。但这似乎不对，我认为我无法为该位置设置动画

另一件事是我对 API 很困惑，我不确定我是否正确使用它。我从不使用animation参数 initemBuilder因为我不明白我可以用它做什么。

如何在 Flutter 中实现这一点？

标签： flutterflutter-animatedlist