如何在 flutter 中实现 150 个动画心形?

How can one implementing 150 animated hearts in flutter?

最近我在 YouTube 上看到了一个关于 flutter 1.0 发布的视频 (link),我想知道如何实现这 150 个动画小心(从 13:50 开始观看)我的应用程序。

我在网络上进行了搜索,但找不到任何可以帮助我完成相同操作的特定小部件。

考虑到我是 flutter 的新手,如果有人能为我指明正确的方向,我将非常高兴。感谢您的帮助:-)

我如何实现它是有一个滚动视图,其中有一个容器(固定高度,宽度 = screenWidth),其中有一个 Stack。我会把所有的红心都放在堆栈中,在我的有状态小部件中保留对所有红心的引用。当点击心形按钮时,我将遍历每个心形小部件并以随机延迟启动它的动画。回顾一下:

  1. 创建一个有状态的小部件,它有一个心形小部件列表
  2. 该视图将是一个带有根子 Container 的滚动视图,并且该 Container 将具有一个子 Stack 小部件。
  3. 在初始化时我会生成 150 个心形小部件,使用容器宽度和高度将它们放置在随机位置并将它们全部设置为不显示。
  4. 当点击心形小部件时,我将循环遍历心形小部件列表(如 1 中所述)并延迟调用 AnimateHeart。

这应该使它在不同的时间都具有动画效果。如果您想循环播放它们,只需在您的心脏小部件中进行管理即可。