Flutter中如何获取硬件键盘CTRL、SHIFT、FUNCTION键状态并监听变化以实现自定义指示器

嘿，这个需求我刚好折腾过，给你分享下具体的实现思路和代码示例，亲测在桌面端（Windows/macOS/Linux）都能正常工作：

核心思路 #

Flutter 提供了RawKeyboard和HardwareKeyboard API来监听硬件键盘事件，我们可以通过监听按键的按下/抬起事件，实时更新CTRL、SHIFT、FUNCTION键的状态，再用自定义UI来做状态指示器——而且这和你已经隐藏系统状态栏的操作完全不冲突。

具体实现步骤 #

1. 维护按键状态 #

首先在StatefulWidget的状态类里定义三个布尔变量，用来保存当前三个按键的激活状态：

bool _isCtrlPressed = false;
bool _isShiftPressed = false;
bool _isFnPressed = false;

2. 注册全局按键监听 #

在initState里添加全局的按键事件处理器，记得在dispose时移除，避免内存泄漏：

@override
void initState() {
  super.initState();
  // 注册全局按键监听
  RawKeyboard.instance.addListener(_handleKeyEvent);
}

@override
void dispose() {
  // 移除监听，防止内存泄漏
  RawKeyboard.instance.removeListener(_handleKeyEvent);
  super.dispose();
}

3. 处理按键事件，更新状态 #

实现_handleKeyEvent方法，通过RawKeyEvent判断按键的按下/抬起状态，同步更新对应的布尔变量：

void _handleKeyEvent(RawKeyEvent event) {
  // 覆盖左右CTRL键的情况
  final isCtrl = event.logicalKey == LogicalKeyboardKey.controlLeft ||
      event.logicalKey == LogicalKeyboardKey.controlRight;
  // 覆盖左右SHIFT键的情况
  final isShift = event.logicalKey == LogicalKeyboardKey.shiftLeft ||
      event.logicalKey == LogicalKeyboardKey.shiftRight;
  // 这里的FUNCTION键针对macOS的FN按键，Windows平台如果是指功能键F1-F12，需要单独调整逻辑
  final isFn = event.logicalKey == LogicalKeyboardKey.function;

  if (isCtrl) {
    setState(() {
      _isCtrlPressed = event is RawKeyDownEvent;
    });
  } else if (isShift) {
    setState(() {
      _isShiftPressed = event is RawKeyDownEvent;
    });
  } else if (isFn) {
    setState(() {
      _isFnPressed = event is RawKeyDownEvent;
    });
  }
}

4. 自定义按键状态指示器UI #

最后在build方法里实现你的自定义指示器，比如用带颜色的容器来直观展示按键是否激活：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // CTRL状态指示器
            _buildKeyIndicator("CTRL", _isCtrlPressed),
            const SizedBox(width: 16),
            // SHIFT状态指示器
            _buildKeyIndicator("SHIFT", _isShiftPressed),
            const SizedBox(width: 16),
            // FUNCTION状态指示器
            _buildKeyIndicator("FN", _isFnPressed),
          ],
        ),
        // 这里放你的其他页面内容
      ],
    ),
  );
}

// 封装通用的指示器组件
Widget _buildKeyIndicator(String label, bool isActive) {
  return Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    decoration: BoxDecoration(
      color: isActive ? Colors.blueAccent : Colors.grey.shade300,
      borderRadius: BorderRadius.circular(8),
      boxShadow: isActive ? [const BoxShadow(blurRadius: 4, color: Colors.blueAccent)] : null,
    ),
    child: Text(
      label,
      style: TextStyle(
        color: isActive ? Colors.white : Colors.black87,
        fontWeight: FontWeight.bold,
      ),
    ),
  );
}

注意事项 #

• 跨平台适配：FUNCTION键在不同平台的逻辑键编码可能不同，比如Windows上的FN按键可能没有统一的逻辑键，如果你指的是F1-F12功能键，需要单独判断LogicalKeyboardKey.f1到LogicalKeyboardKey.f12；macOS的FN按键对应LogicalKeyboardKey.function，可以直接用。
• 局部监听替代：如果不想用全局监听，也可以用RawKeyboardListener组件包裹特定页面区域，效果是一致的，适合只在某个页面需要监听的场景。

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