一起为多个列表项设置动画（展开/折叠）

Posted 2023-05-08

【中文标题】一起为多个列表项设置动画（展开/折叠）

【英文标题】：Animate multiple list items together (expanding/collapsing)

【发布时间】：2021-03-25 08:05:14

【问题描述】：

有没有一种方法可以将多个 listView 项作为一个块一起制作动画，以制作展开/折叠动画。我尝试了 AnimatedList，但它一个一个地为项目设置动画，而不是作为一组或一个块。 ExpansionTile 和 ExpansionPanel 对我不起作用，因为它们在开始时会创建所有子级，并且如果一个组中有 100 个子级 - 这 100 个小部件将一次创建，这对性能非常不利，即使在发布版本中也是如此。

【问题讨论】：

您要实现的目标实际上并不容易。您必须创建一个带有 AnimationController 的 StatefulWidget，为一系列小部件生成值。它们可能是 AnimationBuilder 小部件，但您必须自己实现。

好吧，也许还有其他方法可以实现这一目标？基本上，我需要可扩展/可折叠的瓷砖，孩子们将通过滚动（如 ListView.builder）按需创建，而不是一次全部创建

【参考方案1】：

如果我理解正确，你有一个或多个标题，每个标题可以有多个项目，可以用动画折叠。

因此，请您对每个标题展开或折叠一些布尔切换。然后，切换显示在“扩展”一个包含 ListView 的容器上。通过动画控制器，您可以控制容器的高度。

【讨论】：

您的意思是创建标题小部件，它将容器作为子项，并且该容器将 listView.builder 作为标题内项目的子项，对吗？如果容器具有固定高度，它不会一次创建所有子小部件。但是，我不能将它的高度设置为 400 或 500。我需要它看起来像一个列表。也许你知道如何设置容器的高度，让它看起来像一个列表？

如果您创建 ListView，您将知道元素的数量。然后您可以将其作为高度，例如min(noOfElements * heightofOneElement, 0.7 * screenHeight)。

好像可行，谢谢。但是现在嵌套列表现在可以滚动或与外部列表分开滚动（取决于要使用的 ScrollController）

是的，但是当您到达项目列表的末尾时，这不会滚动外部列表吗？

不，当我到达内部列表的末尾时，如果我设置了 ClampingScrollPhysics，它要么停止滚动，要么只滚动外部列表，而如果我设置 NeverScrollablePhysics，内部只显示适合指定高度的项目跨度>