flutter回收键盘,flutter 键盘

一文解决Flutter中使用TextField遇到的各种疑难杂症

可以使用 SingleChildScrollView 包裹布局

这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset

官方文档给出的解释就是处理键盘遮挡问题，默认是 true，如果不希望顶起需要设置为 false。

在 sdk 低版本的时候是使用 resizeToAvoidBottomPadding 需要将其设置为 false，现在已经弃用。但网上很多文章还没有改正，仍然用的 resizeToAvoidBottomPadding。

分两种情况

一种是使用系统的返回键，比如 android 底部导航自带的返回，

另一种是使用导航栏自定义的返回键

第一种情况需要在页面根布局使用 WillPopScope 在 onWillPop 中拦截返回处理。

原理都是通过判断输入框是否获取了焦点

当底部有固定的组件，比如提交按钮，我们在键盘弹起的时候希望按钮贴着键盘顶部固定，但是中间滚动视图可以自由滚动

可以在 SingleChildScrollView 外部再使用 Stack 包裹，悬浮按钮使用 Positioned 定位，

还要⚠️注意要给滚动组件底部留出距离防遮挡，同时还有动态加上 bottomBar 的高度，因为在 iphoneX 以上的手机，会有个虚拟按键，如果不加上该按键高度，同样会被遮挡

高度获取方法： MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了将 backgroundColor 设为透明。

如果弹窗过高，还是需要将高度固定，然后使用 SingleChildScrollView ，弹窗中同样也可以在执行关闭的时候拦截，判断键盘是否弹起，如果弹起则要先关闭键盘。

给所有输入框绑定 FoucusNode

在 maxLines=1 的情况下，输入框不支持换行，换行按钮会变成 done

监听 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，点击的时候收起键盘。

最后要记得销毁

相关问答

Q1: Flutter textField随着键盘弹出升高，点击空白处收回键盘

1、Flutter中的textField要想实现随着键盘弹出自动升高，必须要在Scaffold中，如下所示

2、如果textfield位置比较下面或者小屏幕时，在键盘弹出的时候导致溢出bug

这时候可以嵌套一层SingleChildScrollView（具体嵌套位置可以根据需要调整），如下所示

效果如下：

3、点击空白处收起键盘，直接嵌套一层GestureDetector即可，嵌套位置可以在Scaffold的body层，可以自己调整。

Q2: Flutter中 webview的键盘问题解决

webview的版本是webview_flutter: ^0.3.22+1

现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。这时候没办法了，网页web端密码框需要修改一下了自己自定义一下不调用密码类型就好，但是无法被输入框弹上去，后来解决方案是用SingleChildScrollView包裹一下，然后自己监听一下键盘的弹窗和隐藏做一下jump的高度就好了

ps： jump的时候要注意高度，可以在键盘出来的时候底部增加一个只有高度的view，键盘收起隐藏就好了

Q3: Flutter 全局关闭键盘

一般的关闭键盘需要关联context,如下，当子页面弹出的键盘，操作父级页面或者顶级页面时，如滑动打开系统级抽屉，这时候就不太实用，可以用开头的方法了

Q4: flutter中关于软键盘弹起导致的问题

原因：在flutter中，键盘弹起时系统会缩小Scaffold的高度并重建

1）把Scaffold的resizeToAvoidBottomInset属性设置为false，这样在键盘弹出时将不会resize

2）把写死的高度改为 原高度 - MediaQuery.of(context).viewInsets.bottom ，键盘弹出时布局将重建，而这个 MediaQuery.of(context).viewInsets.bottom 变量在键盘弹出前是0，键盘弹起后的就是键盘的高度

将输入框放进可滚动的Widget中即可，当输入框获取焦点后，系统会自动将它滑动到可视区域