Flutter Retrigger ListView上的交错动画

Question

我在listView的应用程序中使用flatter_staggered_animations。启动应用程序时，它运行得很好。

问题：

如果我更改listView的child-widget，甚至仅更改itemCount，我希望动画被触发。所以我需要的是staggeredList的rebuild。

但我该怎么做呢？我试着简单地用setState更改child或itemCount。但这正在引发一场动画。。。

在上面找不到任何东西。如果你需要更多信息，请告诉我！

我使用了几乎与示例中的代码完全相同的代码：

@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimationLimiter(
child: ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: YourListChild(),
),
),
);
},
),
),
);
}

Answer 1

您可以在AnimationLimiter上提供一个新密钥，它将重新创建AnimationLimiter，

AnimationLimiter(
key: ValueKey("$itemCount"),
child: ListView.builder(

class STA extends StatefulWidget {
const STA({super.key});
@override
State<STA> createState() => _STAState();
}
class _STAState extends State<STA> {
int itemCount = 5;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
itemCount++;
setState(() {});
},
),
body: AnimationLimiter(
key: ValueKey("$itemCount"),
child: ListView.builder(
itemCount: itemCount,
itemBuilder: (BuildContext context, int index) {
return AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
color: index.isEven ? Colors.amber : Colors.purple,
),
),
),
),
);
},
),
),
);
}
}

Answer 2

因为此包的小部件AnimationLimiter阻止您在setState时重新激活

问题是，如果你删除了那个小部件，当你滚动回旧位置时，ListView将重新激活，这将是一个丑陋的

如果你仍然想要你想要的动画，我建议你写你的自定义AnimatedList，我已经做了一个AnimatedList这样的：

AnimatedList(
key: _listKey,
itemBuilder: (_, index, animation) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-0.5, 0.0),
end: const Offset(0.0, 0.0),
).animate(animation),
child: YourItemWidget(),
);
},
)

然后您可以使用插入功能将单个项目动画添加到列表中：

_listKey.currentState?.insertItem