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

快来打我* 2022-12-03 09:29 392阅读 0赞

![20200903073711629.png][]

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

对于单个页面来说，通过为 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,
              ),
            ),
          ),
        );
      }
    }

![20200903073712363.png][]

当 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][http_laomengit.com]

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

[20200903073711629.png]: /images/20221123/3275b22eedbc4dc4b4741c6cdcddab3e.png
[20200903073712363.png]: /images/20221123/cef6b70e332943c58b26b2d405d9c3ca.png
[http_laomengit.com]: http://laomengit.com