首页 > 解决方案 > 如何为 Flutter SliverList 中的元素设置动画?

问题描述

当用户滚动列表时,我有一个SliverList与 aSliverAppBar一起使用的动画应用栏(标准用例的条子真的,没什么特别的)。

现在我想为SliverList. 例如,添加项目时的水平滑动过渡,或重新排序列表时元素之间的一种垂直“随机播放”。提供了其中AnimatedList一些功能,但不提供 SliverList。

我对框架的理解是,可以将提供给框架的元素包装SliverList在一个AnimatedWidget(或一些类似的小部件)内以动画化更改。但是我对 Flutter 动画的了解还是有点太新鲜了,所以我在寻求帮助。

这是我的代码的一部分。我想为GameScoreWidget下面的实例制作动画。

SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    if (index == 0) {
      return ListReorderWidget(viewModel: viewModel);
    }
    else if (!viewModel.isLatestGame(index-1)) {
      return GameScoreWidget(position: index-1, viewModel: viewModel);
    }
    else
      return Dismissible(
        direction: DismissDirection.endToStart,
        child: GameScoreWidget(position: index-1, viewModel: viewModel),
        key: UniqueKey(),
        background: Container(color: Colors.red),
        onDismissed: (direction) {
          onGameDismissed(context);
        },
      );
  },
  childCount: viewModel.games.length+1,
  ),
)

我找不到任何与我的问题相关的答案。我发现这个问题与SliverList 中的动画变化有关

但是没有答案...

标签: flutterflutter-animationflutter-sliverflutter-animatedlist

解决方案


利用

https://pub.dev/packages/auto_animated

这个包为您提供了LiveSliverList()可用于轻松制作 sliverList 的动画


推荐阅读