Flutter Retrigger ListView 上的交错动画

Question

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

问题:

如果我更改 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,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}