Flutter底部溢出

最新推荐文章于 2025-03-27 08:49:43 发布

TinyWu369

最新推荐文章于 2025-03-27 08:49:43 发布

阅读量3.2k

点赞数

分类专栏： Flutter 文章标签： Fluter 移动开发前端

本文链接：https://blog.youkuaiyun.com/sinat_28753227/article/details/93594212

版权

Flutter 专栏收录该内容

5 篇文章

订阅专栏

最近在学习Flutter开发，真的是一路踩坑过来的。这里记录自己的踩坑之路，以备以后再遇到此类问题，同时希望能够帮助到其他正在学习的童鞋们。
这次的异常是手机屏幕底部有黄线，并且提示“A RenderFlex overflowed by 3.8 pixels on the bottom.”。
IDE用的是VS code，具体异常如下：


I/flutter (19319): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (19319): The following message was thrown during layout:
I/flutter (19319): A RenderFlex overflowed by 3.8 pixels on the bottom.
I/flutter (19319):
I/flutter (19319): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (19319): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (19319): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (19319): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (19319): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (19319): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (19319): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (19319): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (19319): like a ListView.
I/flutter (19319): The specific RenderFlex in question is:
I/flutter (19319):   RenderFlex#5e2be relayoutBoundary=up18 OVERFLOWING
I/flutter (19319):   creator: Column ← ConstrainedBox ← Padding ← Container ← Recommend ← Column ← _SingleChildViewport
I/flutter (19319):   ← IgnorePointer-[GlobalKey#05573] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (19319):   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#6ee6a] ← ⋯
I/flutter (19319):   parentData: <none> (can use size)
I/flutter (19319):   constraints: BoxConstraints(0.0<=w<=392.7, h=198.9)
I/flutter (19319):   size: Size(392.7, 198.9)
I/flutter (19319):   direction: vertical
I/flutter (19319):   mainAxisAlignment: start
I/flutter (19319):   mainAxisSize: max
I/flutter (19319):   crossAxisAlignment: center
I/flutter (19319):   verticalDirection: down
I/flutter (19319): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (19319): ════════════════════════════════════════════════════════════════════════════════════════════════════

我从网上看了一下别人的方法，说是放到SingleChildScrollView()组件中，然后做了相应的修改，修改后的具体代码如下：

在外层添加SingleChildScrollView
但是错误依然没有解决，后来发现是padding的问题：
padding里的参数问题
修改padding: EdgeInsets.fromLTRB(10.0,2.0,0,5.0)里的最后一个参数为（4.0），如上图所示，问题成功解决。黄色底边消失，达到预期显示效果。