問題描述
Flutter日常開發(fā)和頁面布局中，用到Row和Column该园，但經(jīng)常會由于信息過多導(dǎo)致Overflow錯(cuò)誤倒彰。
I/flutter (12803): The following message was thrown during layout:
I/flutter (12803): A RenderFlex overflowed by 131 pixels on the right.
防止Overflow
Row中防止Overflow錯(cuò)誤
Row中，我們可以通過Flex或者Explanded防止Overflow錯(cuò)誤蚯瞧。
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 8.0, right: 20.0), child: Icon(Icons.account_balance),),
Expanded(
child: Text(
'Main Cotent. This is a demo to show how to avoid overflow in a Row widget'),
),
],
)
Column中防止Overflow錯(cuò)誤
Column中可以通過將Column包裹在SingleChildScrollView防止Overflow
Scaffold(
appBar: AppBar(
title: Text('Avoid Column Overflow'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_oneRow(),
_oneRow(),
_oneRow(),
_oneRow(),
_oneRow(),
],
),
),
);
源碼
點(diǎn)擊Github源碼瀏覽下載本示例源碼
