dart - 如何在 flutter 中实现 150 个动画心形？

Question

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

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

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

Answer 1

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

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

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