这次的异常是手机屏幕底部有黄线,并且提示“A RenderFlex overflowed by 3.8 pixels on the bottom.”。
IDE用的是VS code,具体异常如下:

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


修改padding: EdgeInsets.fromLTRB(10.0,2.0,0,5.0)里的最后一个参数为(4.0),如上图所示,问题成功解决。黄色底边消失,达到预期显示效果。

代码交流 2021