【Flutter 实战】全局点击空白处隐藏键盘

概述老孟导读：为什么要实现点击空白处隐藏键盘？因为这是 iOS 平台的默认行为，Android 平台由于其d出的键盘右上角默认带有关闭键盘的按钮，所以点击空白处不会隐藏键盘。 对于单个页面来说，通过为 T

老孟导读：为什么要实现点击空白处隐藏键盘？因为这是 iOS 平台的默认行为，AndroID 平台由于其d出的键盘右上角默认带有关闭键盘的按钮，所以点击空白处不会隐藏键盘。

对于单个页面来说，通过为 TextFIEld 添加 focusNode，点击空白处时使 TextFIEld 失去焦点，实现如下：

class dismissKeyboardDemo extends StatelessWidget {  final FocusNode focusNode = FocusNode();  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(),body: GestureDetector(        onTap: () {          focusNode.unfocus();        },child: Container(          color: colors.transparent,alignment: Alignment.center,child: TextFIEld(            focusNode: focusNode,),);  }}

当 App 中有多个页面多个 TextFIEld 时，此方式会增加大量重复的代码，因此全局添加点击空白处的监听：

class MyApp extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return MaterialApp(      Title: 'Flutter Demo',builder: (context,child) => Scaffold(        body: GestureDetector(          onTap: () {            FocusScopeNode currentFocus = FocusScope.of(context);            if (!currentFocus.hasPrimaryFocus &&                currentFocus.focusedChild != null) {              FocusManager.instance.primaryFocus.unfocus();            }          },child: child,home: dismissKeyboardDemo(),);  }}

也可以使用如下方式隐藏键盘：

SystemChannels.textinput.invokeMethod('Textinput.hIDe');

修改 dismissKeyboardDemo 页面：

class dismissKeyboardDemo extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(),body: Center(        child: TextFIEld(),);  }}

效果和上面是一样的，同样可以实现点击空白处隐藏键盘。

交流

老孟Flutter博客地址（330个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

总结

以上是内存溢出为你收集整理的 【Flutter 实战】全局点击空白处隐藏键盘全部内容，希望文章能够帮你解决 【Flutter 实战】全局点击空白处隐藏键盘所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。