flutter 网络 : Overflow issue in bottom

Question

代码:基本上我有一个简单的应用程序，其中三张图片对齐。我有 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'),
        ),
      ],
    ),
  ],
);

错误:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 1238 pixels on the bottom.

The relevant error-causing widget was: Column file:///C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12

The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. The specific RenderFlex in question is: 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 (can use size) constraints: BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=554.0) size: Size(1280.0, 554.0)

方向:垂直 mainAxisAlignment:中心 主轴尺寸:最大 crossAxisAlignment:中心 垂直方向:向下

图像在设备中没有问题 Image with overflow issue in chrome

Answer 1

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

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