颤动创建无限画面

Question

我想象一种新型的屏幕，我想用Flutter来做，因为它非常强大，可以快速流畅地渲染。

我想实现一种无限的屏幕，可以进入其中的正方形或区域。实际上与地图完全一样（实际上不是无限，但是非常大），但是我可以在这里：

• 拖动并翻译
• 放大和缩小
• 单击并按屏幕的不同部分（正方形或其他）

我想象在小部件“地图”上将GestureDetector与每个组件上的transform结合使用，并在每次移动后刷新屏幕，或者使用draw重绘每个组件，但是我不确定这是遵循此方法的最佳方法。

如果您有任何想法，谢谢您的帮助！

Answer 1

有趣的建议。毕竟，我没有实现，这取决于您，但是我有一些建议。

我想，翻译可以轻松地由2个嵌套的ListViews处理。一种是滚动X，另一种是沿Y方向滚动。 ScrollController可以查询各种信息。

乍一看，缩放也相当容易：您可以将整个屏幕包装在Transform.scale()小部件中。

您可以将每个tappable小部件包装在GuestureDetector中，查询它们的RenderBox以获取其在本地或全局坐标中在屏幕上的位置，并获取其大小。

注意：在游戏中，有一个称为剪切距离的概念。弄清楚如何在Flutter中实现这一点将是一个有趣的挑战。它允许您不要渲染太小，缩小很多的Widget。让我知道事情的后续！很好奇。

---

Answer 2

除了“无限图”外，我已经实现了您要求的部分内容。 代码非常强大，因此我已经在article on Medium中描述了这些东西。 它允许：

• 通过拖动移动地图
• 在地图上放置新对象
• 放大/缩小
• 点击对象

GitHub repo。