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

Posted 2021-04-29 程序员磊哥

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

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

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

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

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

body: GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {
      if (mobileFocusNode.hasFocus) {
        mobileFocusNode.unfocus();
      } else if (passwordFocusNode.hasFocus) {
        passwordFocusNode.unfocus();
      }
    },
    child: _buildLoginContent(context),
),

注意这里的

behavior: HitTestBehavior.translucent

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

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

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

@override
void dispose() {
    if (mobileFocusNode.hasFocus) {
      mobileFocusNode.unfocus();
    } else if (passwordFocusNode.hasFocus) {
      passwordFocusNode.unfocus();
    }
    super.dispose();
}

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