Flutter Web：底部溢出问题

Question

代码：基本上我有一个简单的应用程序，三个图像对齐。 我有 1 列和 2 行。 第一行有两个图像，第二行有一个对齐的图像。 它的应用程序的结构。 它只是在设备中的代码下方运行时完美对齐，但是当我在 WEB 上运行时，就会出现这种溢出。 我尝试调整浏览器 window 的大小，然后它又开始变得漂亮了。 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'),
        ),
      ],
    ),
  ],
);

}

错误：

══╡渲染图书馆捕获的例外╞═════════════════════════════════════════ ════════════════ 在布局过程中抛出了以下断言： A RenderFlex 在底部溢出了 1238 个像素。

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

溢出的 RenderFlex 具有 Axis.vertical 的方向。 溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。 这通常是由于内容对于 RenderFlex 来说太大了。 考虑应用一个弹性因子（例如使用 Expanded 小部件）来强制 RenderFlex 的子级适应可用空间，而不是调整到它们的自然大小。 这被认为是一种错误情况，因为它表明存在看不到的内容。 如果内容合法地大于可用空间，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。 有问题的具体 RenderFlex 是： RenderFlex#1ad1e relayoutBoundary=up1 OVERFLOWING: creator: Column ← DicePage ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#cb60e ink renderer] ← NotificationListener ← PhysicalModel ← ⋯ parentData: offset=Offset(0.0, 56.0); id=_ScaffoldSlot.body（可以使用大小）约束：BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=554.0) 大小：Size(1280.0, 554.0)

方向：垂直 mainAxisAlignment：中心 mainAxisSize：最大 crossAxisAlignment：中心verticalDirection：向下

设备中没有问题的图像 chrome 中存在溢出问题的图像

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 包装 Container 将起作用，但这里只有一个问题，如果你使用 appbar，这个高度应该是“MediaQuery.of(上下文).size.height - AppBar().preferredSize.height"