解决flutter的Row和Column组件报overflowed by xx Pixels

问题: 如题所述

1,Row报overflowed的解决办法:
直接在要展示内容外包一层Expanded解决

child: Scaffold(
        body: Row(
          children: <Widget>[
            Expanded(
              child: _image(),//大图片
            ),
          ],
        ),
      ),

2,Column报overflowed的解决办法:
方法一 : 在Column外包一层SingleChildScrollView

child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Expanded(
                child: _topImage(),
                flex: 0,
              ),
              Expanded(
                child: _accountTextField(),
                flex: 0,
              ),
              Expanded(
                child: _pwdTextField(),
                flex: 0,
              ),
              Expanded(
                child: _loginButton(),
                flex: 0,
              ),
              Expanded(
                child: _registeButton(),
                flex: 0,
              ),
            ],
          ),
        ),
      ),

方法二 : 在Scaffold下设置resizeToAvoidBottomInset : false,

child: Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: _topImage(),
              flex: 0,
            ),
            Expanded(
              child: _accountTextField(),
              flex: 0,
            ),
            Expanded(
              child: _pwdTextField(),
              flex: 0,
            ),
            Expanded(
              child: _loginButton(),
              flex: 0,
            ),
            Expanded(
              child: Container(),
              flex: 1,
            ),
            Expanded(
              child: _registeButton(),
              flex: 0,
            ),
          ],
        ),
        resizeToAvoidBottomInset: false,
      ),

你可能感兴趣的:(知识)