Flutter Web：底部溢出问题答案

【问题标题】：Flutter Web: Overflow issue in bottomFlutter Web：底部溢出问题
【发布时间】：2020-09-08 02:01:51
【问题描述】：

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

}

错误：

══╡ 渲染库发现异常 ╞═════════════════════════════════════════════════ ════════ 在布局期间引发了以下断言：A RenderFlex 溢出底部 1238 像素。

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

溢出的 RenderFlex 的方向为 Axis.vertical。这溢出的 RenderFlex 边缘已在用黄色和黑色条纹图案渲染。这通常是由于内容对于 RenderFlex 来说太大。考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 RenderFlex 的子代以适应可用空间的大小到他们的自然大小。这被认为是一个错误条件，因为它表明有内容不能见过。如果内容合法地大于可用空间，考虑在将其放入 flex，或者使用可滚动容器而不是 Flex，例如列表显示。有问题的具体 RenderFlex 是：RenderFlex#1ad1e relayoutBoundary=up1 OVERFLOWING: creator: Column ← DicePage ← _BodyBuilder ← MediaQuery ← LayoutId-[<_scaffoldslot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#cb60e 墨迹渲染器] ← NotificationListener ← PhysicalModel ← ⋯ parentData: offset=Offset(0.0, 56.0); id=_ScaffoldSlot.body（可以使用大小）约束： BoxConstraints(0.0

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

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

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

用一个指定高度和宽度的大小盒子或容器包裹列

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

【讨论】：

试过了，这只在一定程度上有所帮助。整个内容现在被挤压到左边，web 中的应用程序在右边都是空的。我可能需要进一步检查对齐属性以使内容居中..
在中心内进一步添加了尺寸框，可能最接近我想要的。希望有更好的方法。现在将此标记为答案

【解决方案2】：

在容器内添加以下代码

Container(

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

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

【讨论】：

我尝试包装在容器中并添加了建议的代码。它只是同样的问题。底部溢出 1268px

【解决方案3】：

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

ListView(
     children: <Widget>[
              Column(

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

【讨论】：