Flutter键盘弹出造成布局异常解决

Posted 2022-02-03 JackLee18

  在使用flutter开发时，经常会遇到输入框弹起的时候，debug环境下会提示布局异常。下面我们分两种情况进行讨论分析

输入框在可滚动widget上

输入框如果在滚动的widget上时，键盘弹起，滚动的widget会自动滚动，不存在这个布局异常的问题，如果出现了这种情况，可以排查下Scaffold的resizeToAvoidBottomInset属性设置为false，这个默认是true.

输入框在不可滚动widget上

这种情况不要把输入框距离底部的高度写死，而是加上键盘的动态高度。MediaQuery.of(context).viewInsets.bottom代表键盘的高度，键盘消失时这个值为0。代码如下：

Positioned(
                    right: 0,
                    bottom: 12,
                    left: 0,
                    height: MediaQuery.of(context).viewInsets.bottom + 40,//这里是重点。
                    child: JKBottomInput(eventBus: eventBus))),

其中我的输入框的高度是40，距离底部的距离是12，高度变成了动态的。