Flutter-解决键盘弹起导致页面布局错乱

2,517 阅读1分钟

前言

Flutter中键盘弹起时会改变页面窗口的大小,页面可能会出现布局错乱的问题.如果页面中存在底部定位,那这个问题就更严重了。

问题

图一键盘未弹起时

bug003
图二键盘弹起时
bug004

第一种解决办法

设置Scaffold的属性 resizeToAvoidBottomPaddingfalse

 return Scaffold(
      resizeToAvoidBottomPadding: false,
    );

设置完之后的效果

bug005

注意:如果你跟我一样是在登录页面给这个属性的话,input输入框获取焦点的时候就无法把页面向上移了,会把第二个input框遮住

如图:这并不是我们想要的结果

bug006

第二种解决办法

Scaffold的body包裹一个ListView(就是让这个视图具有弹性效果),
把原本的布局放到ListView的children里面
注意: 不要设置resizeToAvoidBottomPadding: falseresizeToAvoidBottomInset: false不然键盘还是会遮住输入框