前言
Flutter中键盘弹起时会改变页面窗口的大小,页面可能会出现布局错乱的问题.如果页面中存在底部定位,那这个问题就更严重了。
问题
图一键盘未弹起时
图二键盘弹起时第一种解决办法
设置Scaffold
的属性 resizeToAvoidBottomPadding
为 false
return Scaffold(
resizeToAvoidBottomPadding: false,
);
设置完之后的效果
注意:如果你跟我一样是在登录页面给这个属性的话,input输入框获取焦点的时候就无法把页面向上移了,会把第二个input框遮住
如图:这并不是我们想要的结果
第二种解决办法
Scaffold的body包裹一个ListView(就是让这个视图具有弹性效果),
把原本的布局放到ListView的children里面
注意: 不要设置resizeToAvoidBottomPadding: false
和resizeToAvoidBottomInset: false
不然键盘还是会遮住输入框