之前在做Android开发时,被要求实现点击输入框外的空白区域时,隐藏输入法。相对于iOS,Android端实现起来略显复杂,需要拦截触摸事件自行处理。
好在现在有了Flutter,可以很方便地解决这个问题。由于使用Flutter写出的代码在iOS/Android端的行为几乎一致,也不用担心被要求Android端所有的操作与行为必须跟iOS一模一样了。
获取点击事件并隐藏输入法
实现起来非常简单,这也是Flutter具有优势的地方。
要侦测用户点击了输入框之外的区域,我们需要在页面内容的Widget
外增加一个GestureDetector
,当用户点击到空白区域时,我们将输入框的焦点取消掉,相应地输入法也会隐藏掉。
1 | body: GestureDetector( |
注意这里的
1 | behavior: HitTestBehavior.translucent |
如果不加这句,当用户点击空白区域时,如果该区域没有任何元素则不会触发onTap()
事件。加上后则可以正常触发。
GestureDetector
是Flutter检测手势事件的Widget
,做过Android开发的朋友都知道,Android中关于手势事件传递和处理非常复杂。而GestureDetector
非常“聪明”地帮我们处理了事件监听。
另外需要提醒一下,在dispose()
方法中也需要隐藏掉输入法,否则跳转页面时偶尔输入法不能正常隐藏:
1 |
|
代码可以点击这里在Github上下载。