在Flutter App中如何采取正确优雅的姿势取消键盘?
题外话
lz第一次做取消键盘的操作,是使用了一个插件 keyboard_actions (借鉴了deer大佬的demo),有一说一,还是不错的。然后lz偶然的一次查阅别的问题,突然灵机一动,春光灿烂。
检测点击区域
我们需要做的第一件事是检测用户何时点击了当前焦点文本字段之外的内容。这必须得亏有GestureDetector老哥帮忙,它使检测诸如点击、拖动、按住等交互变得超级简单。
怎么使用呢,放哪?
lz是直接包裹在整个MaterialApp上的。
其实看需求而定,也可以在你觉得需要的页面进行包裹就行了,我这样虽然省事,但是后面不知道会不会出现其他问题。对了,Flutter App使用 Scaffold 做为页面的根Widget时,可以设置resizeToAvoidBottomInset = false,来阻止因为唤起键盘而导致把底部的Widgets弹起,避免尴尬哈。
在onTap房里,执行取消焦点操作即可大功告急。
附上图片
取消键盘的方法
对于取消键盘,网上给出了另一个方法,
FocusScope.of(context).requestFocus(new FocusNode());,那为什么lz要用上面那串常常的代码呢?
不要问,问就给出官方解释权:
While this does technically work, it’s not recommended as FocusNode is a ChangeNotifier and therefore needs to be disposed of properly. With the above method, a FocusNode is created and then thrown into the abyss never to be seen again.
对于英语跛脚的我们,直接看下面:
虽然这在技术上是可行的,但并不推荐使用它,因为FocusNode是一个ChangeNotifier,因此需要正确地处理它。使用上面的方法,可以创建一个FocusNode,然后把它扔进深渊,再也看不到它了。
煽情一幕
感谢唯鹿大佬的指教。
原文出处:https://flutterigniter.com/dismiss-keyboard-form-lose-focus/