Flutter Web移动端键盘打开状态检测方案咨询

针对Flutter Web环境下移动端键盘状态检测的需求，以下是两种可行的实现方式，解决flutter_keyboard_visibility库和MediaQuery.viewInsets方法失效的问题：

方案一：监听窗口resize事件+输入框焦点状态 #

移动端浏览器弹出键盘时会显著缩小窗口高度，结合输入框的焦点状态可以精准判断键盘是否打开：

1. 在StatefulWidget的状态类中定义变量：

bool _isKeyboardVisible = false;
final FocusNode _inputFocusNode = FocusNode();
late double _initialWindowHeight;

2. 初始化监听事件：

@override
void initState() {
  super.initState();
  _initialWindowHeight = window.innerHeight;
  // 监听窗口尺寸变化
  window.addEventListener('resize', _handleWindowResize);
  // 监听输入框焦点变化
  _inputFocusNode.addListener(_handleFocusChange);
}

3. 实现监听逻辑：

void _handleWindowResize(_) {
  final currentHeight = window.innerHeight;
  // 阈值可根据实际设备调整，这里取初始高度的20%作为判断标准
  final threshold = _initialWindowHeight * 0.2;
  if (_inputFocusNode.hasFocus && currentHeight < _initialWindowHeight - threshold) {
    if (!_isKeyboardVisible) {
      setState(() => _isKeyboardVisible = true);
    }
  } else if (_isKeyboardVisible) {
    setState(() => _isKeyboardVisible = false);
  }
}

void _handleFocusChange() {
  // 输入框失去焦点时直接标记键盘关闭
  if (!_inputFocusNode.hasFocus && _isKeyboardVisible) {
    setState(() => _isKeyboardVisible = false);
  }
}

4. 清理监听资源：

@override
void dispose() {
  window.removeEventListener('resize', _handleWindowResize);
  _inputFocusNode.dispose();
  super.dispose();
}

5. 绑定输入框焦点：

TextField(
  focusNode: _inputFocusNode,
  decoration: const InputDecoration(hintText: '输入内容'),
)

方案二：监听document的activeElement+窗口高度变化 #

如果页面有多个输入框，可以通过跟踪document.activeElement判断是否有输入框聚焦，再结合窗口高度变化：

@override
void initState() {
  super.initState();
  _initialWindowHeight = window.innerHeight;
  window.addEventListener('resize', _handleWindowResize);
}

void _handleWindowResize(_) {
  final currentHeight = window.innerHeight;
  final isInputFocused = document.activeElement?.tagName.toLowerCase() == 'input' ||
      document.activeElement?.tagName.toLowerCase() == 'textarea';
  final threshold = _initialWindowHeight * 0.2;

  if (isInputFocused && currentHeight < _initialWindowHeight - threshold) {
    if (!_isKeyboardVisible) setState(() => _isKeyboardVisible = true);
  } else if (_isKeyboardVisible) {
    setState(() => _isKeyboardVisible = false);
  }
}

注意事项 #

• 阈值需要根据目标设备的常见键盘高度调整，避免误判。
• 部分浏览器在键盘弹出时可能不会触发resize事件（极少情况），可以结合focus和blur事件补充判断。

内容的提问来源于stack exchange，提问作者Marie Flores