时间戳

首页 > 解决方案 > 图像在一瞬间溢出列

flutter - 图像在一瞬间溢出列

问题描述

这是我的代码：

AlertDialog alert = AlertDialog(
  content: Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image(
            image: correct
                ? AssetImage('assets/images/correct.png')
                : AssetImage('assets/images/wrong.png')),
        Padding(padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
        Text(message)
      ],
    ),
  ),
  actions: [
    okButton,
  ],
);

因此，它几乎可以按预期工作。当我调用警报对话框时，它会正确显示图像和文本。但是，一瞬间，有些东西溢出了。

这是堆栈：

════════ 渲染库捕获到的异常═══════════════════════════════════════════════════════════════ ════════════════ 在布局过程中抛出了以下断言： A RenderFlex 在底部溢出了 102 个像素。

相关的导致错误的小部件是： Column file:///Users/path/to/file/blabla.dart:61:16 ：要在 Flutter DevTools 中检查此小部件，请访问：http: //127.0.0.1 :9100/ #/inspector?uri=http%3A%2F%2F127.0.0.1%3A55261%2FDahKsJWBhm4%3D%2F&inspectorRef=inspector-863 溢出的 RenderFlex 的方向为 Axis.vertical。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。

考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 RenderFlex 的子级适应可用空间，而不是调整到它们的自然大小。这被认为是一种错误情况，因为它表明存在看不到的内容。如果内容合法地大于可用空间，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。

有问题的具体 RenderFlex 是：RenderFlex#117f5 relayoutBoundary=up9 OVERFLOWING ... parentData: offset=Offset(24.0, 20.0) (can use size) ... constraints: BoxConstraints(w=192.0, 0.0<=h<=120.0 ) ... size: Size(192.0, 120.0) ... direction: vertical ... mainAxisAlignment: start ... mainAxisSize: min ... crossAxisAlignment: center ... verticalDirection: down ◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◢

知道是什么原因造成的吗？谢谢！

标签： flutterdart

解决方案

包装你Column的SingleChildScrollView可能会解决问题：

AlertDialog alert = AlertDialog(
  content: Container(
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image(
            image: correct
            ? AssetImage('assets/images/correct.png')
            : AssetImage('assets/images/wrong.png')),
          Padding(padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
          Text(message)
        ],
      ),
    ),
  ),
  actions: [
    okButton,
  ],
);

推荐阅读