[Flutter]Row和Column中防止overflow错误

问题描述

Flutter日常开发和页面布局中，用到Row和Column，但经常会由于信息过多导致Overflow错误。

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错误

Row中，我们可以通过Flex或者Explanded防止Overflow错误。

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错误

Column中可以通过将Column包裹在SingleChildScrollView防止Overflow

Scaffold(
      appBar: AppBar(
        title: Text('Avoid Column Overflow'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _oneRow(),
            _oneRow(),
            _oneRow(),
            _oneRow(),
            _oneRow(),
          ],
        ),
      ),
);

源码

点击Github源码浏览下载本示例源码