如何根据可用屏幕空间动态地将 Flutter OverlayEntry 放置在按钮上方或下方？

Question

我正在开发一个 Flutter 应用程序，在其中使用 OverlayEntry 在单击按钮时在按钮下方显示类似下拉列表的小部件。但是，覆盖层的内容具有基于内部项目的动态高度。如果按钮下方没有足够的空间，我希望覆盖层位于按钮上方，而不是扩展到屏幕之外。

主要挑战是动态计算按钮上方和下方的空间，并根据可用空间决定覆盖层是否应位于上方或下方。我已经使用 RenderBox 来获取按钮的位置和大小，但是当覆盖层的高度是动态时，我无法有效地定位覆盖层。

按钮下方：如果有足够的空间，覆盖层应出现在按钮下方。

按钮上方：如果下方空间不足，覆盖层应出现在按钮上方。

覆盖层应动态调整其高度以适应可用空间，而不会溢出屏幕。

Answer 1

为了解决您的问题，我将其分为四个步骤：

• 我将使用RenderBox来获取按钮的大小和位置
• 我会通过检查屏幕的高度和按钮的位置来计算按钮上方和下方的可用空间，以了解是否可以显示 Overlay。
• 根据我在步骤 2 中计算的可用空间，我将决定叠加层是否应放置在按钮上方或下方
• 最后，我将叠加层显示在正确的位置，确保它与界面完美契合。

希望这对您有帮助。