如何为 Flutter SliverList 中的元素设置动画?

Posted

技术标签:

【中文标题】如何为 Flutter SliverList 中的元素设置动画?【英文标题】:How to animate elements in a Flutter SliverList? 【发布时间】:2020-03-04 13:40:39 【问题描述】:

我有一个SliverList,我将它与SliverAppBar 一起使用,以便在用户滚动列表时为应用栏设置动画(标准用例确实是条子,没什么特别的)。

现在我想为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,
  ),
)

我找不到任何与我的问题相关的答案。我发现这个问题与Animating changes in a SliverList

相关

但没有答案...

【问题讨论】:

【参考方案1】:

使用

https://pub.dev/packages/auto_animated

这个包为您提供LiveSliverList(),它可以用来轻松地为 sliverList 制作动画

【讨论】:

以上是关于如何为 Flutter SliverList 中的元素设置动画?的主要内容,如果未能解决你的问题,请参考以下文章

在 Flutter 中通过拖放重新排序 SliverList 中的项目

Flutter-如何将标题添加到 SliverList 的 SliverChildBuilderDelegate?

Flutter 中 SliverList 与 ListView 的区别

在 Flutter 中重叠 SliverList 子项

flutter系列之:使用SliverList和SliverGird

Flutter SliverAppBar 和 SliverList 有不同的滚动条