當內容超出了移動屏幕的實際寬高時會發生溢出的情況並顯示錯誤訊息,訊息中會指出溢出的方向(水平、垂直)及該代碼位於第幾行,只需將溢出部分包裝在可以處理溢出情況的容器下即可。
錯誤訊息
I/flutter (15792): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (15792): The following assertion was thrown during layout: I/flutter (15792): A RenderFlex overflowed by 24 pixels on the bottom. I/flutter (15792): I/flutter (15792): The relevant error-causing widget was: I/flutter (15792): Column file:///C:/Users/AndroidStudioProjects/lib/pages/firstpage.dart:34:11 I/flutter (15792): I/flutter (15792): The overflowing RenderFlex has an orientation of Axis.vertical. I/flutter (15792): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and I/flutter (15792): black striped pattern. This is usually caused by the contents being too big for the RenderFlex. I/flutter (15792): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the I/flutter (15792): RenderFlex to fit within the available space instead of being sized to their natural size. I/flutter (15792): This is considered an error condition because it indicates that there is content that cannot be I/flutter (15792): seen. If the content is legitimately bigger than the available space, consider clipping it with a I/flutter (15792): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, I/flutter (15792): like a ListView. I/flutter (15792): The specific RenderFlex in question is: RenderFlex#851d4 relayoutBoundary=up2 OVERFLOWING: I/flutter (15792): needs compositing I/flutter (15792): creator: Column ← Center ← Container ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← I/flutter (15792): CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← I/flutter (15792): _InkFeatures-[GlobalKey#1792f ink renderer] ← NotificationListener<LayoutChangedNotification> ← ⋯ I/flutter (15792): parentData: offset=Offset(0.0, 0.0) (can use size) I/flutter (15792): constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=603.4) I/flutter (15792): size: Size(411.4, 603.4) I/flutter (15792): direction: vertical I/flutter (15792): mainAxisAlignment: start I/flutter (15792): mainAxisSize: max I/flutter (15792): crossAxisAlignment: center I/flutter (15792): verticalDirection: down I/flutter (15792): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ I/flutter (15792): ════════════════════════════════════════════════════════════════════════════════════════════════════
解決辦法
使用 SingleChildScrollView 來解決溢出問題,原先代碼:
body: Container( child: Center(child: Column(children:[ ...... ] ) ) )
改為:
body: SingleChildScrollView( child: Center(child: Column(children:[ ...... ] ) ) )
可應用的情況包括註冊、登錄表單時因為展開鍵盤而產生的溢出。
若子元件過多時可以考慮使用ListView。
Latest posts by pluto (see all)
- React 那些好看、有趣、實用的函式庫、組件庫推薦(2) - 2022 年 6 月 26 日
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日