Flutter键盘隐藏插件keyboard_hider的使用

keyboard_hider

这个小巧的Flutter包帮助你隐藏键盘。通过方便的辅助方法和KeyboardHider小部件。

在Flutter中，一切皆为小部件。因此，我决定创建一个简单的小部件，帮助你在表单上轻松隐藏用户的键盘。

重要链接

• 阅读源码并在GitHub上关注仓库
• 在GitHub上提出问题
• 查看pub.dev上的包
• 在pub.dev上阅读文档
• Stack Overflow - 如何关闭屏幕键盘？
• Flutter Docs - GestureDetector类，SystemChannels类，SystemChannels.textInput常量，FocusScopeNode类，FocusNode.unfocus方法

如果你喜欢使用这个包，请在pub.dev上点赞！👍💙🚀

动机

在与用户交互的过程中，我们发现并不是每个用户都熟悉他们的键盘，并且他们期望点击文本框外时键盘能够自动隐藏。我们决定给用户提供一个选项，在点击文本框外时隐藏键盘。

我在Stack Overflow上找到了这个问题的解答。我不满意在每个地方添加重复的代码，因为记住如何配置GestureDetector以及如何正确地unfocus（隐藏键盘）有点麻烦。

你可以看到我2019年的Stack Overflow回答: 我决定将这些功能封装在一个方便的Flutter小部件中，以便简化用户点击屏幕外文本框时隐藏键盘的功能（类似于网页上的键盘隐藏方式）。

从那时起，我在几个项目中工作过，并注意到这种模式被反复讨论。所以现在我决定发布这个包，以便我可以快速简单地将此功能添加到我的Flutter应用中。

使用

将应检测触摸的小部件包装在KeyboardHider小部件中，并在触摸时隐藏键盘。

该小部件不会干扰文本字段，因此用户可以在KeyboardHider小部件包裹的文本字段之间无缝切换。

import 'package:keyboard_hider/keyboard_hider.dart';

class YourWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 当你点击子元素时，键盘应该被隐藏。
    return KeyboardHider(
      child: Text('你的小部件...'),
    );
  }
}

该包还包括两个辅助函数，以简化隐藏键盘的操作。

unfocus(BuildContext context) 函数接受上下文并取消当前FocusScopeNode的焦点来隐藏键盘。

hideTextInput() 函数调用SystemChannels.textInput的方法通道上的TextInput.hide方法。

如果需要，你还可以向KeyboardHider传递一个HideMode值。 默认情况下，KeyboardHider小部件使用unfocus方法，但你可以将其更改为hideTextInput：

class YourOtherWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 当你点击子元素时，键盘应该被隐藏。
    return KeyboardHider(
      mode: HideMode.hideTextInput,
      child: Text('你的小部件...'),
    );
  }
}

使用hideTextInput，键盘会被隐藏，但不会取消当前焦点范围节点的焦点。这意味着如果文本字段处于聚焦状态，它将继续保持聚焦状态，只有键盘会被隐藏。

你可以在GitHub和pub.dev上找到示例应用。

如果你对这个包的结构还有疑问，建议再看一下文档。

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:keyboard_hider/keyboard_hider.dart';

// 这是一个示例项目，我们不关心const和print，这样可以使初学者更容易理解代码。
//
// ignore_for_file: prefer_const_constructors, avoid_print

void main() => runApp(const ExampleWidget());

const title = 'keyboard_hider_example';

class ExampleWidget extends StatelessWidget {
  const ExampleWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    const p = EdgeInsets.fromLTRB(16, 8, 16, 8);
    return MaterialApp(
      title: title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
        appBar: AppBar(
          // 应用栏位于键盘隐藏小部件之外，所以点击应用栏标题时，键盘不会被隐藏。
          title: const Text(title),
          actions: [
            // 确保上下文可以访问FocusScope。
            // 如果键盘未隐藏，尝试将其包装在一个Builder中以获取能够取消当前焦点范围节点的上下文。
            Builder(
              builder: (context) => IconButton(
                onPressed: () => unfocus(context),
                icon: const Icon(Icons.keyboard),
              ),
            )
          ],
        ),
        body: KeyboardHider(
          child: ListView(
            children: [
              // 如果键盘打开，你可以点击此文本以隐藏键盘。
              Text('这是一个简单的文本'),
              // hideTextInput的工作方式略有不同，它会隐藏键盘，但不会取消焦点范围节点的焦点，
              // 因此文本字段仍会高亮显示。
              ElevatedButton(
                onPressed: hideTextInput,
                child: Text('隐藏文本输入'),
              ),
              TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: '第一个文本字段',
                ),
                onChanged: (s) => print('第一个改变 $s'),
              ),
              TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: '第二个文本字段',
                ),
                onChanged: (s) => print('第二个改变 $s'),
              ),
              Text('更多文本。 ' * 20),
            ].map((e) => Padding(padding: p, child: e)).toList(),
          ),
        ),
      ),
    );
  }
}