目前Flutter官方是没有自定义键盘的解决方案
可是咱们有时候须要用到它,好比金额键盘,安全密码键盘,各类自定义快速输入键盘
因而我便写了一个自定义键盘的插件,因为是经过拦截PlatformChannel实现的,因此能够无缝对接TextFiled等Flutter自带的输入框
GitHub连接git
dependencies:
cool_ui: "^0.1.14"
复制代码
import 'package:cool_ui/cool_ui.dart';
复制代码
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());
}
复制代码
首先在须要使用到键盘的页面修改成下面的代码github
@override
Widget build(BuildContext context) {
return KeyboardMediaQuery(//用于键盘弹出的时候页面能够滚动到输入框的位置
child: Builder(builder: (ctx) {
CoolKeyboard.init(ctx); //初始化键盘监听而且传递当前页面的context
return Page; //返回当前页面
})
);
}
复制代码
而后设置TextField的keyboardType为自定义键盘的类型安全
TextField(
...
keyboardType: NumberKeyboard.inputType
...
)
复制代码