Question

我正在学习flutter，目前从android切换到flutter。在flutter中，我大多会收到类似以下的错误 bottom overflowed by 234 pixels或renderbox overflowed by 340 pixels。我通过增加小部件的高度来解决该问题。如果是这样，那么如何知道小部件的大小。我的意思是在android中我们可以声明小部件的高度布局以包装内容，并且可以完美地工作。请向我说明如何避免这种情况，因为如果我通过更改一个设备中的小部件的高度来解决此问题，然后在其他屏幕尺寸的设备中更改了相同的错误，则会发生这种情况？抛出错误的图像。忽略红色错误，请在下面的屏幕中查看错误。谢谢。

！https://imgur.com/a/PsZzeMp

Answer 1

如果要为小部件提供固定的宽度和高度，请使用SizedBox进行包装。您可以指定固定的宽度和高度，并且您的子窗口小部件将是确切的尺寸。

如果您希望固定其中一个尺寸而另一个尺寸与父小部件一样大，则可以尝试以下操作：

SizedBox(
  width: double.inifinity,
  height: 50.0
  child: Conttainer()
 )

如果您担心给出固定尺寸。您可以根据屏幕尺寸的比例指定高度或宽度。您可以像这样获得屏幕的高度和宽度：

双倍宽度= MediaQuery.of（context）.size.width;

使用上述值为小部件设置宽度，如下所示：

Container(
  width:  MediaQuery.of(context).size.width * 0.8,
  height: 100,
 )

回答评论中的问题。您可以执行以下操作来用动态内容包装文本。

ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 100
      ),
      child: Text(
        'ADASFASF ssss'
      ),
    )

如果文本小部件的宽度超过100像素，则上述代码会将文本包装到下一行。因为我们对高度没有任何限制。

Answer 2

当子窗口小部件的最小尺寸大于父窗口部件的限制（宽度和/或高度）时，就会发生溢出。

这意味着您可以：

使父窗口小部件变大（例如：SizedBox（height :, width：，））
使孩子变小（例如：使用FittedBox（fit：BoxFit.scaleDown）小部件）

尽管第一种方法不允许您使用大于父级父级窗口小部件的大小。相对于父母，而不是相反地建立孩子，就足够了。

在您的情况下，似乎您的文本+图像小部件占用了太多空间。我建议将其包装在FittedBox中，该容器将按比例缩小子小部件，直到其适合您的底部栏中。

FittedBox(
  fit: BoxFit.scaleDown,
  child: _buildChildWidget(),
)

然后可以将其包装在其他小部件中以构建所需的布局（行，扩展，灵活，LayoutBuilder等）。

由于文本或图像太大，通常会发生溢出问题。一个好的练习是尝试使您的应用正常运行，同时将文本大小设置为设备的辅助功能选项所允许的最大值。您可以通过设置相对于文字大小的图像大小来对图像执行相同操作。

填充和边距也会引起问题，因为它们为子窗口小部件保留了较少的空间。

底部溢出123像素实际上是什么意思

2 个答案: