Flutter如何监听键盘可见性状态

在Flutter开发中，如何实时监听Android/iOS键盘的显示和隐藏状态？目前需要在键盘弹出时调整页面布局，但找不到可靠的监听方法。尝试过WidgetsBindingObserver和FocusNode，但无法准确捕获键盘事件。是否有官方推荐的方式或第三方库可以实现这个功能？最好能兼容不同平台和屏幕尺寸。

2 回复

在Flutter中监听键盘可见性，可以通过以下方式：

  1. 使用WidgetsBindingObserver监听界面变化
class KeyboardListener extends StatefulWidget {
  @override
  _KeyboardListenerState createState() => _KeyboardListenerState();
}

class _KeyboardListenerState extends State<KeyboardListener> 
    with WidgetsBindingObserver {
    
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    final viewInsets = WidgetsBinding.instance.window.viewInsets;
    final keyboardVisible = viewInsets.bottom > 0;
    print('键盘状态: ${keyboardVisible ? '显示' : '隐藏'}');
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}
  1. 使用keyboard_visibility第三方包 在pubspec.yaml添加依赖后：
KeyboardVisibility.onChange.listen((bool visible) {
  print('键盘 ${visible ? '显示' : '隐藏'}');
});

推荐使用第一种方式，无需额外依赖，通过系统窗口的viewInsets.bottom判断键盘高度即可。

更多关于Flutter如何监听键盘可见性状态的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过以下方法监听键盘可见性状态：

1. 使用 WidgetsBindingObserver

通过监听 didChangeMetrics 回调来检测键盘状态变化。

import 'package:flutter/material.dart';

class KeyboardListenerPage extends StatefulWidget {
  @override
  _KeyboardListenerPageState createState() => _KeyboardListenerPageState();
}

class _KeyboardListenerPageState extends State<KeyboardListenerPage> with WidgetsBindingObserver {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  void didChangeMetrics() {
    final viewInsets = WidgetsBinding.instance.window.viewInsets;
    final keyboardHeight = viewInsets.bottom;
    setState(() {
      _isKeyboardVisible = keyboardHeight > 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Keyboard Visibility')),
      body: Center(
        child: Text(
          _isKeyboardVisible ? '键盘可见' : '键盘隐藏',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

2. 使用第三方库 keyboard_visibility

更简单的方式是使用社区维护的库：

步骤：

  1. 添加依赖：
dependencies:
  keyboard_visibility: ^0.5.3
  1. 使用示例：
import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';

class KeyboardVisibilityExample extends StatefulWidget {
  @override
  _KeyboardVisibilityExampleState createState() => _KeyboardVisibilityExampleState();
}

class _KeyboardVisibilityExampleState extends State<KeyboardVisibilityExample> {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    KeyboardVisibility.onChange.listen((bool visible) {
      setState(() {
        _isKeyboardVisible = visible;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          _isKeyboardVisible ? '键盘打开' : '键盘关闭',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

注意事项：

  • 方法1需要手动管理观察者的添加和移除
  • 方法2使用更简洁，但需要引入额外依赖
  • 键盘高度变化时可能会多次触发回调，建议根据实际需求进行防抖处理

推荐使用 keyboard_visibility 库，代码更简洁且维护性更好。

回到顶部