Flutter：在小部件从小部件树中移除时或在其生命周期结束时动画化小部件？

Question

我有一个GridView，其中显示了网格中项目的自定义小部件。这些项目在出现在网格中时会缩放其大小从0到100％的动画，并使用AnimationController.forward()命令。

我希望当网格中的项目列表更改并且其中一个项目不再在列表中时，我可以在小部件从树中删除之前反转动画，以使其从网格中动画移除。

我尝试在小部件的dispose方法中执行AnimationController.reverse()，但似乎不起作用。

有没有办法在小部件生命周期结束时对其进行动画处理？

- a344254

---

我认为你无法在dispose时对其进行动画处理，因为这太晚了，widget已经被移除。你需要先开始移除动画，然后设置一个回调来在动画完成后从树中删除widget。 - Igor Kharakhordin

问题在于，提供给 GridView 的列表是动态的，除非我维护一个包含网格中所有项目的列表并将其与从服务器接收到的新列表进行比较，否则我不确定如何知道该项何时“离开”而不是已经消失？这可能最终是我需要做的来实现我想要的结果。谢谢。 - a344254

我建议你看一下_AnimatedSwitcher_小部件。学习它的工作原理，也许你会得到一个实现这样一个东西的想法。或者你可以直接使用AnimatedSwitcher来动画整个网格。 - Igor Kharakhordin

找到任何解决方案了吗？ - Siddharth jha

我有一个模糊的想法，你可以使用ScrollController并在所需滚动位置调用reverse()。根据小部件大小进行调整。不过需要进行一些测试。 - Sina Seirafi

Answer 1

您可以尝试使用此pub https://pub.flutter-io.cn/packages/auto_animated。 您可以将自定义动画与此pub结合使用，以实现所需的行为。

// With predefined options
LiveGrid.options(
  options: options,

  // Like GridView.builder, but also includes animation property
  itemBuilder: buildAnimatedItem,

  // Other properties correspond to the `ListView.builder` / `ListView.separated` widget
  itemCount: itemsCount,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 16,
    mainAxisSpacing: 16,
  ),
);

buildAnimatedItem 可以是您自定义的动画，您可以像这样定义:

Widget buildAnimatedItem(
  BuildContext context,
  int index,
  Animation<double> animation,
) =>
  // For example wrap with fade transition
  FadeTransition(
    opacity: Tween<double>(
      begin: 0,
      end: 1,
    ).animate(animation),
    // And slide transition
    child: SlideTransition(
      position: Tween<Offset>(
        begin: Offset(0, -0.1),
        end: Offset.zero,
      ).animate(animation),
      // Paste you Widget
      child: YouWidgetHere(),
    ),
  );

看一下pub的Readme文件，非常清晰明了。

- FedeH