Flutter：在从小部件树中删除时或在其生命周期结束时为小部件设置动画？

Posted 2023-02-23

【中文标题】Flutter：在从小部件树中删除时或在其生命周期结束时为小部件设置动画？

【英文标题】：Flutter: Animate a widget on removal from the widget tree, or during the end of it's lifecycle?

【发布时间】：2020-03-05 04:52:57

【问题描述】：

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

我的希望是，当网格中的项目列表发生变化并且其中一个项目不再在列表中时，我想在从树中删除小部件之前反转动画，以动画它的删除来自网格。

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

有没有办法在小部件的生命周期结束时为其设置动画？

【问题讨论】：

我认为您无法在 dispose 上为其设置动画，因为为时已晚，并且小部件已被删除。您需要先启动移除动画，并设置回调以在动画完成后从树中移除小部件

问题是，提供给 GridView 的列表是动态的，除非我维护网格中所有项目的列表并将其与从服务器收到的新列表进行比较，否则我'我不确定我怎么知道该物品在它消失之前“离开”了？这可能最终是我需要做的，以完成我所追求的。谢谢

我建议您查看 AnimatedSwitcher 小部件。了解它是如何工作的，也许你会知道如何实现这样的事情。或者你可以使用 AnimatedSwitcher 为整个网格设置动画。

找到解决方案了吗？

【参考方案1】：

你可以试试这家酒吧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就很清楚了