大家在學習Flutter的時候，剛剛開始學習布局應該會各種遇到溢出。比如在用到Row或者Column經常會遇到布局溢出的問題。
The overflowing RenderFlex has an orientation of Axis.horizontal.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is: RenderFlex#2c804 OVERFLOWING:
flutter: needs compositing
flutter: creator: Row ← Counter ← Semantics ← Builder ← RepaintBoundary-[GlobalKey#39fcd] ← IgnorePointer ←
flutter: Stack ← _CupertinoBackGestureDetector<dynamic> ← DecoratedBox ← DecoratedBoxTransition ←
flutter: FractionalTranslation ← SlideTransition ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(w=320.0, h=480.0)
flutter: size: Size(320.0, 480.0)
flutter: direction: horizontal
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: textDirection: ltr
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
怎么解決呢，我們可以嘗試用SingleChildScrollView和Expanded做為布局防止布局溢出。
SingleChildScrollView的用法：
調整后效果為：
Row 和 Column 是 Flex 組件，是無法滾動的，如果沒有足夠的空間，flutter就提示溢出錯誤。
這種情況下，Expanded 或 Flexible 組件可用作長文本的自動換行。
在 Flutter文檔中 雖然沒有明確說明，但是在主軸上如有內容超出空間， Expanded 和 Flexible 會自動換行到縱軸。
Expanded的用法：
return Row( children: <Widget>[ RaisedButton( onPressed: _increment, child: Text('Increment'), ), Expanded(child:Text('這里是超長的或者是可變的不搞這個就會超出屏幕的')), // Text('Count: $_counter'), ], );Row