【Flutter 常见问题】TextField 如何实现全局点击空白处隐藏键盘

TextField 实现点击后隐藏键盘分为以下几种情况

文章目录

一：单个页面一个输入框

如果你的页面只有一个输入框，你可以使用 TextField 的 focusNode 属性来控制点击后隐藏键盘。

Demo

注：已省略无关代码

class LoseKeyboardDemo extends StatelessWidget {
  FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          TextField(focusNode: _focusNode),
          RaisedButton(
            onPressed: () => _focusNode.unfocus(),
            child: Text("发送"),
          ),
        ],
      ),
    );
  }
}

演示效果如下

二：单个页面多个输入框(全局隐藏)

如果一个页面有多个输入框，用方式一会增加大量重复的代码，因此需要全局添加点击空白处的监听，这种情况和第三种情况都属于全局点击空白处隐藏键盘，具体代码如三

三：多个页面多个输入框(全局隐藏)

实现全局点击空白处隐藏键盘，复制下面 MaterialApp 中的 builder 属性的代码即可实现全局监听

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

效果演示图如下

---

结束语

Google 的 Flutter 越来越火，截止 2020年10月30日 GitHub 标星已达 105K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

如果你是 Flutter 新手或者刚入门，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。