Flutter全局检测键盘显示与隐藏状态的技术问询

我之前处理过类似的需求，要在整个应用里监听键盘的弹出/隐藏，进而控制BottomNavigationBar的显示状态——其实这个方案完全可以扩展到任何需要响应键盘状态的场景，核心思路就是把键盘状态转化为全局可共享的状态，然后在需要的组件中监听这个状态变化。

第一步：实现全局键盘状态监听类 #

我们可以通过WidgetsBinding来监听窗口布局变化，判断键盘是否显示。这里用ChangeNotifier来封装状态，方便全局共享和监听：

import 'package:flutter/material.dart';

class KeyboardVisibilityNotifier extends ChangeNotifier {
  bool _isKeyboardVisible = false;

  bool get isKeyboardVisible => _isKeyboardVisible;

  KeyboardVisibilityNotifier() {
    // 监听窗口布局变化
    WidgetsBinding.instance.addObserver(this);
    // 初始化状态判断
    _checkKeyboardVisibility();
  }

  void _checkKeyboardVisibility() {
    final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
    final newState = bottomInset > 0;
    if (newState != _isKeyboardVisible) {
      _isKeyboardVisible = newState;
      notifyListeners();
    }
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 布局变化时重新检查键盘状态
    _checkKeyboardVisibility();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

这个类会在窗口布局变化时（比如键盘弹出/隐藏）自动检查键盘状态，一旦状态改变就通知所有监听者。

第二步：在应用根节点提供全局状态 #

要让整个应用的子树都能访问到这个状态，我们可以用ChangeNotifierProvider把它包裹在应用的最外层：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => KeyboardVisibilityNotifier(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MainScreen(),
    );
  }
}

第三步：在BottomNavigationBar所在页面响应状态变化 #

现在在包含BottomNavigationBar的主页面，我们用Consumer来监听键盘状态，动态控制BottomNavigationBar的显示：

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Keyboard Demo')),
      body: const Center(child: TextField()), // 测试用输入框
      // 根据键盘状态动态显示/隐藏BottomNavigationBar
      bottomNavigationBar: Consumer<KeyboardVisibilityNotifier>(
        builder: (context, notifier, child) {
          if (notifier.isKeyboardVisible) {
            return const SizedBox.shrink(); // 隐藏导航栏
          }
          return BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
            ],
          );
        },
      ),
    );
  }
}

扩展到通用场景 #

这个方案不止适用于BottomNavigationBar——任何需要响应键盘状态的组件，都可以通过Consumer<KeyboardVisibilityNotifier>或者Provider.of<KeyboardVisibilityNotifier>(context)来获取键盘状态，然后做出对应的UI调整，比如调整组件位置、显示/隐藏其他元素等。

注意事项 #

• 记得在不再需要监听时调用dispose()方法，不过我们在KeyboardVisibilityNotifier的构造和dispose里已经处理了WidgetsBinding的观察者注册/移除，只要Provider正常销毁就没问题。
• 某些特殊场景下（比如平板的分屏模式），viewInsets.bottom的判断可能需要微调，但大部分移动端场景下这个逻辑是可靠的。

内容的提问来源于stack exchange，提问作者Jakob Kristensen