問題描述

Flutter日常開發(fā)和頁面布局中，用到Row和Column，但經(jīng)常會(huì)由于信息過多導(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源碼瀏覽下載本示例源碼