Flutter：在从小部件树中删除时或在其生命周期结束时对小部件进行动画处理？

Question

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

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

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

有什么方法可以在小部件生命周期结束时为其设置动画吗？

Answer 1

你可以试试这个pub https://pub.flutter-io.cn/packages/auto_animated。您可以将自定义动画与此酒吧结合起来，并能够达到所需的行为。

// 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就很清楚了