Flutter 自定义键盘解决方案

Flutter 自定义键盘解决方案

前言:

目前Flutter官方是没有自定义键盘的解决方案
但是我们有时候需要用到它,比如金额键盘,安全密码键盘,各种自定义快速输入键盘
于是我便写了一个自定义键盘的插件,由于是通过拦截PlatformChannel实现的,所以可以无缝对接TextFiled等Flutter自带的输入框
GitHub链接

效果

使用方法:

安装依赖

dependencies:
  cool_ui: "^0.1.14"
复制代码

导入包

import 'package:cool_ui/cool_ui.dart';
复制代码

编写一个自定义键盘Widget

class NumberKeyboard extends StatelessWidget{
    static const CKTextInputType inputType = const CKTextInputType(name:'CKNumberKeyboard'); //定义InputType类型
    static double getHeight(BuildContext ctx){ //编写获取高度的方法
         ...
    }

    final KeyboardController controller ; //用于控制键盘输出的Controller
    const NumberKeyboard({this.controller});

    static register(){   //注册键盘的方法
        CoolKeyboard.addKeyboard(NumberKeyboard.inputType,KeyboardConfig(builder: (context,controller){
            return NumberKeyboard(controller: controller);
        },getHeight: NumberKeyboard.getHeight));
    }

    @override
    Widget build(BuildContext context) { //键盘的具体内容
      ...
      return Container( //例子
        color: Colors.white,
        child: GestureDetector(
           behavior: HitTestBehavior.translucent,
           child: Center(child: Text('1'),),
           onTap: (){
              controller.addText('1'); 往输入框光标位置添加一个1
           },
        ),
      )
    }
}

复制代码

注册键盘

void main(){
  NumberKeyboard.register(); //注册键盘
  runApp(MyApp());
}
复制代码

使用键盘

首先在需要使用到键盘的页面修改为下面的代码

@override
Widget build(BuildContext context) {
  return KeyboardMediaQuery(//用于键盘弹出的时候页面可以滚动到输入框的位置
      child: Builder(builder: (ctx) {
        CoolKeyboard.init(ctx); //初始化键盘监听并且传递当前页面的context
        return Page; //返回当前页面
      })
  );
}
复制代码

然后设置TextField的keyboardType为自定义键盘的类型

TextField(
   ...
   keyboardType: NumberKeyboard.inputType
   ...
 )
复制代码