聚焦TextField后RawKeyboardListener功能异常的技术问题求助

问题概述 #

该问题主要影响无触屏的物理键盘设备（如Chromebook），触屏设备也存在关联异常，是适配带物理键盘设备时的阻碍：

• 无触屏设备（Chromebook）：RawKeyboardListener在切换到TextField再切回后，无法识别普通文本按键，仅能监听左Alt、左Shift等修饰键；仅按住Alt时可识别字母类按键
• 触屏设备：聚焦TextField后再切回RawKeyboardListener，按下物理键盘按键会弹出软键盘，不符合「仅无外接键盘时自动弹出软键盘」的预期

核心问题表现（无触屏设备） #

• 应用启动后首次聚焦RawKeyboardListener，可正常监听所有按键（字母、数字、空格、修饰键等）
• 切换到TextField可正常输入文本
• 切回RawKeyboardListener后，普通文本按键无响应，仅修饰键可被识别；按住Alt+字母时能正常识别对应按键
• 重启应用后RawKeyboardListener恢复正常，但只要聚焦过TextField，再次切回就会触发问题

触屏设备关联异常 #

• 聚焦TextField后，按下物理键盘按键时软键盘会弹出
• 隐藏软键盘并切回RawKeyboardListener后，按下物理按键仍会弹出软键盘

复现步骤 #

1. 创建Flutter项目：flutter create chromebook_keyboard
2. 在State类中添加成员变量：

   final _keyboardListenerFocus = FocusNode();
   String _keyName = 'N/A';
   

3. 重写dispose()方法以释放焦点：

   @override
   void dispose() {
     _keyboardListenerFocus.dispose();
     super.dispose();
   }
   

4. 在build方法的Column组件中添加以下内容：

   Text('Here is plain TextField:'),
   Container(width: 200, child: TextField()),
   SizedBox(height: 50),
   Text(
       'Tap the green container to show the keycode using a RawKeyboardListener:'),
   GestureDetector(
     onTap: () => _keyboardListenerFocus.requestFocus(),
     child: Container(
       width: 200,
       height: 100,
       color: Colors.green,
       alignment: Alignment.center,
       child: RawKeyboardListener(
         focusNode: _keyboardListenerFocus,
         onKey: (keyEvent) => setState(
             () => _keyName = keyEvent.data.logicalKey.debugName),
         child: Text('keyName = $_keyName'),
       ),
     ),
   ),
   

临时解决方案 #

方案1：修复RawKeyboardListener按键监听异常 #

切换焦点到RawKeyboardListener时，先强制失去焦点再延迟重新请求，重置焦点状态：

GestureDetector(
  onTap: () {
    // 先释放当前焦点
    _keyboardListenerFocus.unfocus();
    // 延迟后重新请求焦点，确保焦点树状态重置
    Future.delayed(const Duration(milliseconds: 100), () {
      FocusManager.instance.primaryFocus?.unfocus();
      _keyboardListenerFocus.requestFocus();
    });
  },
  child: Container(
    width: 200,
    height: 100,
    color: Colors.green,
    alignment: Alignment.center,
    child: RawKeyboardListener(
      focusNode: _keyboardListenerFocus,
      onKey: (keyEvent) => setState(
          () => _keyName = keyEvent.data.logicalKey.debugName),
      child: Text('keyName = $_keyName'),
    ),
  ),
)

方案2：控制触屏设备软键盘弹出时机 #

通过MediaQuery结合焦点管理，仅在无外接键盘时自动弹出软键盘：

1. 在State类中添加判断逻辑：

   bool get hasPhysicalKeyboard {
     final mediaQuery = MediaQuery.of(context);
     // 临时判断逻辑：宽屏且无底部内边距偏移时认为有物理键盘
     return mediaQuery.size.width > 600 && mediaQuery.viewInsets.bottom == 0;
     // 如需更精准判断，可通过平台通道调用原生API检测外接键盘状态
   }
   

2. 修改TextField配置，控制软键盘弹出：

   final _textFieldFocus = FocusNode();
   
   TextField(
     focusNode: _textFieldFocus,
     onTap: () {
       if (!hasPhysicalKeyboard) {
         TextInput.show();
       }
     },
     onEditingComplete: () {
       _textFieldFocus.unfocus();
       TextInput.hide();
     },
   )
   

3. 切换到RawKeyboardListener时强制隐藏软键盘：

   onTap: () {
     TextInput.hide();
     // 加上方案1的焦点切换逻辑
     _keyboardListenerFocus.unfocus();
     Future.delayed(const Duration(milliseconds: 100), () {
       FocusManager.instance.primaryFocus?.unfocus();
       _keyboardListenerFocus.requestFocus();
     });
   }
   

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