Flutter点击输入框外空白处隐藏输入法

之前在做Android开发时,被要求实现点击输入框外的空白区域时,隐藏输入法。相对于iOS,Android端实现起来略显复杂,需要拦截触摸事件自行处理。

好在现在有了Flutter,可以很方便地解决这个问题。由于使用Flutter写出的代码在iOS/Android端的行为几乎一致,也不用担心被要求Android端所有的操作与行为必须跟iOS一模一样了。

获取点击事件并隐藏输入法

实现起来非常简单,这也是Flutter具有优势的地方。

要侦测用户点击了输入框之外的区域,我们需要在页面内容的Widget外增加一个GestureDetector,当用户点击到空白区域时,我们将输入框的焦点取消掉,相应地输入法也会隐藏掉。

1
2
3
4
5
6
7
8
9
10
11
body: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
if (mobileFocusNode.hasFocus) {
mobileFocusNode.unfocus();
} else if (passwordFocusNode.hasFocus) {
passwordFocusNode.unfocus();
}
},
child: _buildLoginContent(context),
),

-c300

注意这里的

1
behavior: HitTestBehavior.translucent

如果不加这句,当用户点击空白区域时,如果该区域没有任何元素则不会触发onTap()事件。加上后则可以正常触发。

GestureDetector是Flutter检测手势事件的Widget,做过Android开发的朋友都知道,Android中关于手势事件传递和处理非常复杂。而GestureDetector非常“聪明”地帮我们处理了事件监听。

另外需要提醒一下,在dispose()方法中也需要隐藏掉输入法,否则跳转页面时偶尔输入法不能正常隐藏:

1
2
3
4
5
6
7
8
9
@override
void dispose() {
if (mobileFocusNode.hasFocus) {
mobileFocusNode.unfocus();
} else if (passwordFocusNode.hasFocus) {
passwordFocusNode.unfocus();
}
super.dispose();
}

代码可以点击这里在Github上下载。

程序员磊哥 wechat
扫描微信二维码,关注磊哥的公众号