Flutter 优雅拦截系统键盘弹出

为什么常规方法不够优雅

要实现自定义键盘，核心难点在于抑制系统键盘。开发者通常有两种思路：

• 主动隐藏：在特定时间点调用 SystemChannels.textInput.invokeMethod<void>('TextInput.hide')。这种方式存在明显的缺陷：它依赖于对“时机”的精准把握，稍有不慎就会引入额外的 Bug；同时，在隐藏前若系统已尝试弹出键盘，往往会造成页面的上下拉伸和布局闪烁。
• 魔改源码：追踪到触发键盘的是 EditableTextState 中的 TextInputConnection，复制官方代码并注释掉调用 _show() 的地方。这种方法虽然彻底，但在每次 Flutter 版本升级时都需要重新合并差异（Merge），维护成本极高，属于吃力不讨好的做法。

因此，我们需要一种既能彻底拦截信号，又不侵入官方框架代码，且能精细控制特定输入框行为的方案。

核心原理：拦截 MethodChannel 消息

Flutter 的 Framework 层通过 MethodChannel 向 Engine 层发送命令以唤起键盘。如果我们能在消息发出前进行拦截和丢弃，即可从根源上解决键盘弹出问题。WidgetsFlutterBinding 提供了 createBinaryMessenger 方法，允许我们注入自定义的消息传输器，这是拦截通信的理想入口。

第1步：创建绑定混合类

首先创建一个 Mixin，用于重载 BinaryMessenger，接管所有跨端通道消息。

mixin TextInputBindingMixin on WidgetsFlutterBinding {
  @override
  BinaryMessenger createBinaryMessenger() {
    return TextInputBinaryMessenger(super.createBinaryMessenger());
  }
}

第2步：定义主 App Binding

在应用启动前，实例化包含该 Mixin 的自定义 Binding 类，确保全局生效。

class YourBinding extends WidgetsFlutterBinding with TextInputBindingMixin {
}

void main() {
  YourBinding();
  runApp(const MyApp());
}

第3步：实现消息拦截逻辑

编写 TextInputBinaryMessenger 继承自 BinaryMessenger。我们需要重点处理 send 方法，因为它是 Framework 向外发送数据的唯一出口。

当消息通道为 'flutter/textinput' 且方法名为 'TextInput.show' 时，我们可以选择返回一个成功信封来“欺骗”上层调用者认为操作成功，从而阻止真正的引擎交互。

class TextInputBinaryMessenger extends BinaryMessenger {
  TextInputBinaryMessenger(this.origin);
  final BinaryMessenger origin;

  @override
  Future<ByteData?>? send(String channel, ByteData? message) async {
    // 检查是否为文本输入通道
    if (channel == SystemChannels.textInput.name) {
      // 解码方法调用
      final MethodCall methodCall =
          SystemChannels.textInput.codec.decodeMethodCall(message);
      
      switch (methodCall.method) {
        case 'TextInput.show':
          // 在这里插入拦截判断逻辑，见下文
          break;
        default:
          break;
      }
    }
    // 默认透传非拦截的消息
    return origin.send(channel, message);
  }

  @override
  void setMessageHandler(String channel, MessageHandler? handler) {
    origin.setMessageHandler(channel, handler);
  }

  @override
  Future<void> handlePlatformMessage(String channel, ByteData? data,
      PlatformMessageResponseCallback? callback) {
    return origin.handlePlatformMessage(channel, data, callback);
  }
}

第4步：关联 FocusNode 进行精细化控制

全局拦截可能导致所有 TextField 都无法唤起键盘，这不符合实际需求。通常我们希望只有特定的输入框（如使用了自定义键盘的界面）才禁止系统键盘，而其他普通输入框仍应保持正常行为。
利用 FocusManager.instance.primaryFocus 可以获取当前拥有焦点的节点。我们可以定义一个特殊的 FocusNode，标记那些需要屏蔽系统键盘的控件。

// 自定义 FocusNode，携带屏蔽标志
class TextInputFocusNode extends FocusNode {
  /// 设置为 true 时，阻止 Flutter Framework 发送 `TextInput.show` 消息
  bool ignoreSystemKeyboardShow = true;
}

更新 send 方法中的判断逻辑：

  @override
  Future<ByteData?>? send(String channel, ByteData? message) async {
    if (channel == SystemChannels.textInput.name) {
      final MethodCall methodCall =
          SystemChannels.textInput.codec.decodeMethodCall(message);
          
      if (methodCall.method == 'TextInput.show') {
        final FocusNode? focus = FocusManager.instance.primaryFocus;
        // 如果当前焦点是我们关注的自定义节点，且开启了屏蔽
        if (focus is TextInputFocusNode && focus.ignoreSystemKeyboardShow) {
          // 伪装成执行成功，实际不向 Engine 发送 show 请求
          return SystemChannels.textInput.codec.encodeSuccessEnvelope(null);
        }
      }
    }
    return origin.send(channel, message);
  }

集成自定义键盘 UI

完成底层拦截后，需要在 UI 层配合展示自定义键盘（例如使用 showBottomSheet 弹出的面板）。关键点在于监听 FocusNode 的状态变化来决定显示或隐藏自定义键盘。

以下是一个完整的示例流程，展示了如何在点击输入框时触发底部自定义面板，并在失去焦点或关闭面板时恢复原状。

PersistentBottomSheetController<void>? _bottomSheetController;
final TextInputFocusNode _focusNode = TextInputFocusNode()..debugLabel = 'YourTextField';

@override
void initState() {
  super.initState();
  _focusNode.addListener(_handleFocusChanged);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: TextField(
      focusNode: _focusNode,
      onTap: () {
        // 确保在点击时也触发键盘显示逻辑
        if (_bottomSheetController == null) {
          _handleFocusChanged();
        }
      },
    ),
  );
}

void _handleFocusChanged() {
  if (_focusNode.hasFocus) {
    // 聚焦时弹出底部自定义键盘
    _bottomSheetController = showBottomSheet<void>(
      context: FocusManager.instance.primaryFocus!.context!,
      enableDrag: true, // 允许拖动关闭
      builder: (BuildContext b) {
        // 这里放置你的自定义键盘 Widget
        return Container(
          color: Colors.grey[200],
          height: 250,
          child: Center(child: Text('Custom Keyboard')),
        );
      },
    );
    // 监听面板关闭事件
    _bottomSheetController?.closed.whenComplete(() {
      _bottomSheetController = null;
    });
  } else {
    // 失焦或手动关闭时，确保面板消失
    if (_bottomSheetController != null) {
      _bottomSheetController!.close();
      _bottomSheetController = null;
    }
  }
}

@override
void dispose() {
  _focusNode.removeListener(_handleFocusChanged);
  super.dispose();
}

布局替代方案

如果你的自定义键盘不需要悬浮在内容之上，而是像普通软键盘一样顶起布局，可以采用列式布局：

Column(
  children: [
    Expanded(  // 自适应剩余空间
      child: YourMainContent(),
    ),
    YourCustomKeyboardWidget(), // 固定高度的键盘
  ],
)

总结与扩展

通过重载 createBinaryMessenger 并针对 SystemChannels.textInput 进行条件拦截，我们成功在不修改官方源码的前提下实现了自定义键盘的支持。这种方法不仅解决了布局闪烁的问题，还通过 FocusNode 实现了多场景下的灵活控制。

此外，SystemChannels 中还包含其他通道（如 'flutter/keyevent'），采用相同的 BinaryMessenger 拦截思想也可以实现对物理按键或特定系统事件的屏蔽与重定向，极大地拓展了 Flutter 在特定硬件或交互场景下的定制能力。

以上就是 Flutter 阻止系统键盘弹出的详细内容的详细内容，更多关于 Flutter 自定义键盘开发的资料请关注本站其它相关文章！