如何关闭屏幕键盘？

Question

我正在使用 TextFormField 收集用户输入，当用户按下 FloatingActionButton 表示完成后，我希望关闭屏幕键盘。

如何让键盘自动消失？

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.send),
        onPressed: () {
          setState(() {
            // send message
            // dismiss on screen keyboard here
            _controller.clear();
          });
        },
      ),
      body: new Container(
        alignment: FractionalOffset.center,
        padding: new EdgeInsets.all(20.0),
        child: new TextFormField(
          controller: _controller,
          decoration: new InputDecoration(labelText: 'Example Text'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

void main() {
  runApp(new MyApp());
}

- Collin Jackson

---

以下是2021年5月的推荐解决方案。 - Son Nguyen

先生，您能否请查看与Flutter相关的以下问题。下面的链接是我在Stack Overflow上发布的问题链接-----https://stackoverflow.com/questions/69640226/how-to-create-shapes-or-alphabets-by-joining-dots-join-dots-for-creating-shap。 - Jithu Hari

Answer 1

对于Flutter 2或更新版本：

自从使用空安全的Flutter 2以来，这是最好的方法：

FocusManager.instance.primaryFocus?.unfocus();

注意：使用旧的方法会导致一些问题，比如保持重建状态；

---

对于 Flutter 版本小于 2：

从 Flutter v1.7.8+hotfix.2 开始，正确的做法是：

FocusScope.of(context).unfocus();

关于此PR的评论：

现在，由于 #31909 (be75fb3)已经合并，您应该使用 FocusScope.of(context).unfocus() 而不是 FocusScope.of(context).requestFocus(FocusNode())，因为 FocusNode 是 ChangeNotifiers，应该被正确处理。

-> 不要再 使用 ̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶ 了。

 F̶o̶c̶u̶s̶S̶c̶o̶p̶e̶.̶o̶f̶(̶c̶o̶n̶t̶e̶x̶t̶)̶.̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶)̶;̶

阅读有关Flutter文档中FocusScope类的更多信息，请点击此处。

- Pascal

---

我遇到的问题是，当我离开文本字段打开相机时，键盘并不总是消失，而是覆盖在相机上。这个解决方案确实移除了焦点，但是焦点会返回到文本字段，问题仍然存在。将焦点移动到未使用的FocusNode可以解决这个问题。 - dfmiller

如果这个解决方案没有修复您的错误，您可以在跳转到另一个页面之前添加 "await Future.delayed(const Duration(milliseconds: 200))"。 - Eray Hamurlu

我的问题是我在UI中放置了'focusnode: FocusNode()'。我将其删除并放置了以下代码。成功了！ - Vipin Krishna

谢谢你提供的好解决方案。但我有一个问题。如果我使用FocusManager.instance.primaryFocus?.unfocus();这个解决方案，我应该在dispose方法中处理它吗？ - Aaydin

@Aaydin 不确定你的具体用例是什么。我建议你只是进行实验/测试并查看结果;-) - Pascal

Answer 2

注意: 此回答已过时。请查看Flutter的更新版本的答案。

通过将焦点从TextFormField取走并将其赋给未使用的FocusNode，可以关闭键盘：

FocusScope.of(context).requestFocus(FocusNode());

- Collin Jackson

---

你会在哪里实现这段代码？是在TextFormField中，在onChanged:之后还是在自定义按钮的操作中？ - Charles Jr

如果您需要的话，可以使用我的软件包 :) https://pub.dartlang.org/packages/keyboard_actions - diegoveloper

这是在Flutter v1.7.8之前的内容 - 参见答案https://dev59.com/h1cO5IYBdhLWcg3w-V_0#56946311，其中提供了`FocusScope.of(context).unfocus()`。 - Richard Johnson

如果您可以访问 .unfocus()，请不要这样做，因为它会导致内存泄漏。那个新的 FocusNode() 将永远不会被清除。 请参阅有关 .unfocus() 的注释。 - Michael Peterson

它会触发两次渲染。 - lolelo

Answer 3

使用FocusScope解决方案对我没有起作用。 我找到了另一个：

import 'package:flutter/services.dart';

SystemChannels.textInput.invokeMethod('TextInput.hide');

它解决了我的问题。

- Andrii Turkovskyi

---

这个调用对我来说并没有隐藏键盘。它应该在Android和iOS上都能工作吗？ - Jardo

在我的iOS设备（12.1，iPhone 5s）和Android设备（Pixel 3）上运行良好。 - Jannie Theunissen

你把它放在哪里？我尝试将其作为应用程序中的第一段代码添加，但它没有任何作用。 - Justin808

你的意思是什么 - “第一行代码”？比如将其插入到build方法中。 - Andrii Turkovskyi

这个在数字键盘上有对应的吗？ - onesiumus

Answer 4

对于Flutter 1.17.3（截至2020年6月的稳定频道版本），请使用

FocusManager.instance.primaryFocus.unfocus();

- suztomo

---

已测试并可在Flutter 1.24.0、iOS 14.0和Android 11模拟器上运行。 - g212gs

很好用。在使用null-safety时，可以使用可选链来操作primaryFocus，代码如下： FocusManager.instance.primaryFocus?.unfocus(); - Michal Šrůtek

这对我来说可行，适用于Flutter版本：2.0.2。 - Muklas

Answer 5

以下代码帮助我隐藏键盘

   void initState() {
   SystemChannels.textInput.invokeMethod('TextInput.hide');
   super.initState();
   }

- poonam

---

对我来说，这种方法比添加FocusScope.of(context).unfocus()的解决方案更好，因为那个解决方案会让键盘反复显示和隐藏。 - Varun

这对我来说是最好的方法。我从另一个屏幕打开了键盘，我认为焦点处于奇怪的状态，所以只有这种方法有效。谢谢你！！！ - Eradicatore

这种解决方案比以前的更加优雅。最重要的是，它可以包装在覆盖dispose方法中，以确保当小部件被处理（例如在对话框中非常有用）时，屏幕键盘输入将被适当关闭。 - chungonion

Answer 6

如果要关闭键盘（1.7.8+hotfix.2及以上版本），只需调用以下方法：

FocusScope.of(context).unfocus();

一旦 FocusScope.of(context).unfocus() 方法检查到已经有焦点后再关闭键盘，就不需要再次检查它。但是如果你需要的话，只需调用另一个上下文方法：FocusScope.of(context).hasPrimaryFocus

- Cassio Seffrin

Answer 7

看起来不同的版本有不同的方法。我正在使用Flutter v1.17.1，下面的方法适用于我。

onTap: () {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
       currentFocus.focusedChild.unfocus();
    }
}

- dbyuvaraj

Answer 8

GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child:Container(
    alignment: FractionalOffset.center,
    padding: new EdgeInsets.all(20.0),
    child: new TextFormField(
      controller: _controller,
      decoration: new InputDecoration(labelText: 'Example Text'),
    ),
  ), })

尝试在触摸手势上使用此功能

- Karan Champaneri

Answer 9

由于在Flutter中一切都是widget，因此我决定将FocusScope.of(context).unfocus();方法封装在一个简短的实用widget中。

只需创建KeyboardHider小部件：

import 'package:flutter/widgets.dart';

/// A widget that upon tap attempts to hide the keyboard.
class KeyboardHider extends StatelessWidget {
  /// Creates a widget that on tap, hides the keyboard.
  const KeyboardHider({
    required this.child,
    Key? key,
  }) : super(key: key);

  /// The widget below this widget in the tree.
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => FocusScope.of(context).unfocus(),
      child: child,
    );
  }
}

现在，您可以使用KeyboardHider小部件将任何小部件（在使用良好的IDE时非常方便）包装起来，然后当您点击某个东西时，键盘会自动关闭。它与表单和其他可点击区域一起使用效果很好。

class SimpleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardHider(
      /* Here comes a widget tree that eventually opens the keyboard,
       * but the widget that opened the keyboard doesn't necessarily
       * takes care of hiding it, so we wrap everything in a
       * KeyboardHider widget */
      child: Container(),
    );
  }
}

- Vince Varga

Answer 10

以上的方案都对我无效。

Flutter建议这样做 - 将你的小部件放置在new GestureDetector()中，当点击时它将隐藏键盘并使用FocusScope.of(context).requestFocus(new FocusNode())来处理onTap事件。

class Home extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    var widget = new MaterialApp(
        home: new Scaffold(
            body: new Container(
                height:500.0,
                child: new GestureDetector(
                    onTap: () {
                        FocusScope.of(context).requestFocus(new FocusNode());
                    },
                    child: new Container(
                        color: Colors.white,
                        child:  new Column(
                            mainAxisAlignment:  MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,

                            children: [
                                new TextField( ),
                                new Text("Test"),                                
                            ],
                        )
                    )
                )
            )
        ),
    );

    return widget;
}}

- aamitarya