颤振网:底部溢出问题

Question

代码：基本上我有一个简单的应用程序，其中三个图像对齐。我有 1 列和两行。第一行有两个图像，第二行有 1 个图像对齐。它是应用程序的结构。当在设备中运行下面的代码时，它只是完美对齐，但是当我在 WEB 上运行时，会出现这种溢出。我尝试调整浏览器窗口的大小，然后它才开始再次变得漂亮。Flutter Web 是否有解决方法，请问我应该如何在此处进行对齐？下面的代码在正文内部和脚手架内部。我正在从没有问题的设备和有溢出问题的 Flutter web 附加图片。

return Column(
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Image.asset('images/image1.png'),
),
],
),
],
);

}

错误：

═

═╡ 渲染库捕获的异常 ╞══════════════════════════════════════════════════════════ 在布局期间抛出以下断言：RenderFlex 溢出 底部为 1238 像素。

导致错误的相关小部件是：列 file:///C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12

溢出的 RenderFlex 的方向为 Axis.vertical。这 溢出的 RenderFlex 边缘已在 使用黄色和黑色条纹图案渲染。这通常是 由于内容对于RenderFlex来说太大了。考虑 应用弹性因子(例如，使用扩展的小部件(来强制 RenderFlex 的子项，以适合可用空间 的大小被调整到它们的自然大小。这被视为错误 条件，因为它指示存在不能 明显。如果内容合法大于可用空间， 考虑使用 ClipRect 小部件将其剪辑，然后再将其放入 flex，或使用可滚动容器而不是 Flex，例如 列表视图。有问题的特定 RenderFlex 是：RenderFlex#1ad1e 重新布局边界=向上1 溢出： 创建者： 列 ← 骰子页面 ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#cb60e ink renderer] ← NotificationListener ← 物理模型 ← ⋯ 父数据：偏移量=偏移量(0.0， 56.0(;id=_ScaffoldSlot.body(可以使用大小(约束： 框约束(0.0<=w<=1280.0， 0.0<=h<=554.0( 大小： 大小(1280.0， 554.0(

方向：垂直 主轴对齐：中心 主轴尺寸：最大 交叉轴对齐：中心 垂直方向：向下

设备中没有问题的图像 在镶边中出现溢出问题的图像

Answer 1

用具有定义高度和宽度的大小框或容器包裹列

SizedBox(
height:200,
width:200,
child: your column goes here,
)

Answer 2

在容器中添加以下代码

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

这是定义容器全宽和全高的通用方法

Answer 3

如果您不尝试将小部件放入屏幕并且滚动是您的一个选项，则可以使用 listview 或类似的小部件。

ListView(
children: <Widget>[
Column(

否则，使用 MediaQuery.of(context(.size.width 和 MediaQuery.of(context(.size.height包装容器将起作用，但这里只有一个问题，如果您使用 appbar，此高度应为"MediaQuery.of(context(.size.height - AppBar((.preferredSize.height">