Flutter Web:底部出现溢出问题

问题描述 投票:0回答:1

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

}

错误:

══╡渲染库引起的异常╞═════════════════════════════════════════════════ ════════在布局期间引发以下声明:RenderFlex溢出底部的1238像素。

相关的引起错误的小部件是:列文件:/// C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12

溢出的RenderFlex的方向为Axis.vertical。的溢出的RenderFlex边缘已在黄色和黑色的条纹图案的3d渲染。通常是由于内容对于RenderFlex而言太大。考虑应用弹性系数(例如,使用扩展小部件)来强制RenderFlex的子代以适合可用空间调整为自然尺寸。这被认为是错误条件,因为它表明存在无法看过。如果内容合法大于可用空间,考虑将其放入ClipRect小部件之前对其进行裁剪flex,或使用可滚动容器而不是Flex,例如列表显示。有问题的特定RenderFlex是:RenderFlex#1ad1erelayoutBoundary = up1溢出:创建者:列←DicePage←_BodyBuilder←MediaQuery←LayoutId-[<_ scaffoldslot.body>]←CustomMultiChildLayout←AnimatedBuilder←DefaultTextStyle←AnimatedDefaultTextStyle←_InkFeatures- [GlobalKey#cb60e墨水渲染器]←NotificationListener←物理模型←⋯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:向下

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

flutter flutter-layout flutter-web
1个回答
0
投票

用定义了高度和宽度的大小合适的盒子或容器包装列

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



0
投票

在容器内添加以下代码

Container(

         width: MediaQuery.of(context).size.width,
         height: MediaQuery.of(context).size.height,
....
....
)
© www.soinside.com 2019 - 2024. All rights reserved.