RenderFlex溢出Flutter

Question

我是Flutter的新手，目前遇到无法解决的问题。在我的培训中，我制作了一个在Andriod模拟器Nexus 5X和Nexus 6中看起来不错的应用程序，但在屏幕较小的Nexus One上看起来还不错。我生成了APK，并将其安装在我的Huawei Mate 9（5.9“）上，而且运行也不正常。请注意，我的Huawei，Nexus 5X和Nexus 6的屏幕尺寸都差不多。

我已经在此站点上检查了类似的问题，并尝试了许多方法，但仍然无法解决。

我的小部件是否可以根据屏幕大小自动调整大小？或您建议如何预防/修复此RenderFlex溢出问题。

我唯一想到的另一件事就是减小图标/文本的大小。

Here is my code.

非常感谢您的宝贵时间。

Answer 1

当定义的像素（硬编码的高度，宽度或任何尺寸）发生渲染溢出。直到小部件相互碰撞，它才会发生。要解决此问题，从根本上讲mediaQuery会需要动态高度限制。MediaQuery会为您提供有关设备的信息，其中一项信息是设备大小，下面提供了一个示例。

我在下面提供了一个有关在基本应用程序中如何实现MediaQuery的示例。 有关详细信息，请参见此视频

https://www.youtube.com/watch?v=A3WrA4zAaPw

class Dimensions {
  static double boxWidth;
  static double boxHeight;

  Dimensions(BuildContext context) {
    boxHeight = MediaQuery.of(context).size.height / 100;
    boxWidth = MediaQuery.of(context).size.width / 100;
  }
}

在上面的代码中，boxHeight和boxWidth基本上是百分比的高度和宽度。

Answer 2

您可以尝试使用名为“扩展”的颤动小部件。尝试使用flex值包装页面上的每个窗口小部件，具体取决于应为该窗口小部件分配总屏幕空间的多少。这样可以防止渲染溢出错误。