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
   ...
 )
複製代碼