Flutter Web：底部溢出问题

Question

代码：基本上我有一个简单的应用程序，其中三个图像对齐。我有 1 列和两行。第一行有两个图像，第二行有一个图像对齐。它是应用程序的结构。当运行在设备中的代码下方时，它只是完美对齐，但是当我在 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'),
        ),
      ],
    ),
  ],
);

}

错误：

══╡ 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,
)

Answer 2

在 Container 中添加以下代码

Container(

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

这是为容器定义完整宽度和高度的通用方法

Answer 3

如果您不想让您的小部件适合屏幕并且滚动是您的一个选项，您可以使用列表视图或类似的小部件。

ListView(
     children: <Widget>[
              Column(

否则，用 MediaQuery.of(context).size.width 和 MediaQuery.of(context).size.height 包装 Container 会起作用，但这里只有一个问题，如果你使用了一个appbar，这个高度应该是"MediaQuery.of(context).size.height - AppBar().preferredSize.height"

Flutter Web：底部溢出问题

Flutter Web: Overflow issue in bottom

flutter

flutter-layout

flutter-web