Flutter 拦截系统键盘,显示自定义键盘

一、这里记录下在开发过程中,下单的时候输入金额需要使用自定义的数字键盘

效果图

二、屏蔽系统键盘

怎样才能够在输入框获取焦点的时候,不让系统键盘弹出呢?同时又显示我们自定义的键盘呢?

  • 这里就需要自定义BinaryMessenger了 ,在这里拦截发送给系统显示键盘的消息这样就达到了不显示系统键盘的目的了
dart 复制代码
class TextInputBinaryMessenger extends BinaryMessenger {
  final BinaryMessenger origin;

  TextInputBinaryMessenger(this.origin);

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

  @override
  Future<ByteData?>? send(String channel, ByteData? message) async {
    ///拦截系统键盘
    if (channel == SystemChannels.textInput.name) {
      final codec = SystemChannels.textInput.codec;
      final methodCall = codec.decodeMethodCall(message);
      if (methodCall.method == 'TextInput.show') {
        final FocusNode? focusNode = FocusManager.instance.primaryFocus;

        ///使用了这个[CustomKeyboardFocusNode] 统一不显示系统键盘
        if (focusNode is CustomKeyboardFocusNode) {
          return codec.encodeSuccessEnvelope(null);
        }
      }
    }
    return origin.send(channel, message);
  }

  @override
  void setMessageHandler(String channel, MessageHandler? handler) {
    origin.setMessageHandler(channel, handler);
  }
}
  • 这里有个小技巧,通过自定义一个FocusNode 这样在需要显示键盘的时候可以很轻松的判断当前需不需要显示系统的键盘。
  • 那现在就要做第二步了显示自己的键盘:也很简单只需要监听输入框的焦点的变化来显示和隐藏键盘即可。

三、最后怎么使用上面自定义好的TextInputBinaryMessenger呢?

  • 如下代码:
dart 复制代码
class CustomWidgetsFlutterBinding extends WidgetsFlutterBinding
    with TextInputBindingMixin {
  ///初始化
  static WidgetsBinding? ensureInitialized() {
    CustomWidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

mixin TextInputBindingMixin on ServicesBinding {
  @override
  BinaryMessenger createBinaryMessenger() {
    return TextInputBinaryMessenger(super.createBinaryMessenger());
  }
}
  • 最后只需要在程序入口初始化即可:
dart 复制代码
 void main() {
  CustomWidgetsFlutterBinding.ensureInitialized();
  runApp();
}
相关推荐
努力只为躺平几秒前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄3 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵3 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾8 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove15 分钟前
常见 npm 报错问题
前端·npm
sunbyte15 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子17 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua20 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_36 分钟前
暑期前端训练day5
前端
uncleTom66643 分钟前
前端布局利器:rem 适配全面解析
前端