代码之家  ›  专栏  ›  技术社区  ›  a344254

flatter:在小部件从小部件树中移除时,或者在其生命周期结束时,为小部件设置动画?

  •  1
  • a344254  · 技术社区  · 5 年前

    我有一个GridView,它显示了网格中项目的自定义小部件。这些项目具有一个动画,当它们出现在网格中时,可以使用动画控制器.前进()命令。

    我试着做了一个动画控制器.反转(),但这似乎不起作用。

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

    0 回复  |  直到 5 年前
        1
  •  0
  •   FedeH    4 年前

    你可以试试这个酒吧 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,
      ),
    );
    

    构建动画编辑器 可以自定义动画,您可以这样定义:

    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(),
        ),
      );