本文共 2599 字，大约阅读时间需要 8 分钟。

最近在学习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 andI/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 theI/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 beI/flutter (19319): seen. If the content is legitimately bigger than the available space, consider clipping it with aI/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 OVERFLOWINGI/flutter (19319):   creator: Column ← ConstrainedBox ← Padding ← Container ← Recommend ← Column ← _SingleChildViewportI/flutter (19319):   ← IgnorePointer-[GlobalKey#05573] ← Semantics ← Listener ← _GestureSemantics ←I/flutter (19319):   RawGestureDetector-[LabeledGlobalKey
   
    #6ee6a] ← ⋯I/flutter (19319):   parentData: 
    
      (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: verticalI/flutter (19319):   mainAxisAlignment: startI/flutter (19319):   mainAxisSize: maxI/flutter (19319):   crossAxisAlignment: centerI/flutter (19319):   verticalDirection: downI/flutter (19319): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤I/flutter (19319): ════════════════════════════════════════════════════════════════════════════════════════════════════
    
   

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

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

转载地址：http://rncii.baihongyu.com/