Flutter 自定键盘键盘解决方案

悠悠 2022-01-20 06:11 1306阅读 0赞

# Flutter 自定键盘键盘解决方案 #

## 前言: ##

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

[GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FIm-Kevin%2Fcool_ui