轻松掌握 Flutter 点击空白隐藏键盘，全面解析全局实现技巧

2023-11-22 20:55:13

Flutter点击空白隐藏键盘的全局做法

在 Flutter 中，点击空白隐藏键盘是常见的需求。实现这一功能的关键在于事件分发机制和 GestureDetector 手势识别器。

事件分发机制

Flutter 的事件分发机制遵循冒泡原则，即事件从最底层控件逐级向上传递，直到被某个控件处理或达到根节点。在点击空白区域时，事件会从手指触碰屏幕的位置开始，依次传递给子控件和父控件，最终到达根节点。如果根节点没有处理该事件，则事件会被丢弃。

GestureDetector 手势识别器

GestureDetector 手势识别器可以识别各种手势，包括点击、拖动、缩放等。通过GestureDetector，我们可以监听点击事件，并根据需要执行相应的操作。

隐藏键盘

要实现点击空白隐藏键盘，我们需要在 GestureDetector 中监听点击事件，并在点击事件发生时请求关闭键盘。具体步骤如下：

在需要隐藏键盘的屏幕中，使用 GestureDetector 包裹所有控件。
在 GestureDetector 的 onTap() 方法中，请求关闭键盘。

GestureDetector(
  onTap: () {
    FocusScope.of(context).requestFocus(FocusNode());
  },
  child: Column(
    children: [
      // 其他控件
    ],
  ),
);

全局实现

为了在整个应用中实现点击空白隐藏键盘，我们可以创建一个基类 Widget，并在基类 Widget 中实现 GestureDetector 的 onTap() 方法。然后，让所有需要隐藏键盘的屏幕都继承基类 Widget。

class BaseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Column(
        children: [
          // 其他控件
        ],
      ),
    );
  }
}

class MyHomePage extends BaseWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyHomePage'),
      ),
      body: Column(
        children: [
          // 其他控件
        ],
      ),
    );
  }
}