Flutter实战-自定义键盘(一)

用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）

注意：无特殊说明，flutter版本为3.0+

此文大部分代码内容来自 GitHub - Im-Kevin/cool_ui: 用flutter实现一些我认为好看的UI控件,有Popover,仿Weui的Toast,自定义键盘，感谢大神指路，喜欢的可以去看源码，当然也有区别于原作者的实现，敬请关注。

---

        为什么需要自定义键盘？自定义键盘可以说在客户端原生开发中有很多地方需要用到，比如做一个数字键盘支持支付业务，特殊内容的输入，或者响应其他特殊需求。作者在开发中也遇到自定义键盘的需求，当时是初学，在github和pub.flutter-io.cn中查了大量的插件，觉得cool_ui中的自定义键盘能满足，再次感谢作者。此文从cool_ui的自定义键盘出发，细说一下解决思路，希望给初学者在自定组件和理解Flutter运行原理提供帮助。

自定义键盘一定是一个Widget组件，那么它至少要实现类似系统键盘的以下功能：

• 当TextField 聚焦时候弹出键盘组件，将主视图推到键盘上，不至于遮挡
• 实现内容发送到TextField，也要有“搜索”，“确定”，“下一个”，“收起键盘”等常用键盘指令

当然还有一些细节，比如TextField 失去焦点的时候的时候收起键盘等。

本文先解决如何推起键盘的问题。

一。KeyboardRootWidget

        首先我们要定义一个组件包裹要使用自定义键盘的组件，这个组件可以进行键盘的初始化工作，并定义设置键盘，清楚键盘等功能

1.定义一个StatefulWidget，里面有两个参数的基础设置

class KeyboardRootWidget extends StatefulWidget {
        final Widget child;
        final TextDirection textDirection;  //文字输入的方向，有从右到左，也有从左到右

...

2.键盘初始化KeyboardMediaQuery，下一个章节具体解释

@override
Widget build(BuildContext context) {
// TODO: implement build
return KeyboardMediaQuery(child: Builder(builder: (context) {
CoolKeyboard.init(this, context);

List<Widget> children = [widget.child];
if (_keyboardBuilder != null) {
children.add(Builder(
builder: _keyboardBuilder!,
));
}

...
}

3.设置键盘和清除键盘的方法

setKeyboard 和clearKeyboard ，这两个方法用来设置和清除WidgetBuilder

完整代码如下：

class KeyboardRootState extends State<KeyboardRootWidget> {
WidgetBuilder? _keyboardBuilder;

bool get hasKeyboard => _keyboardBuilder != null;

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
// TODO: implement build
return KeyboardMediaQuery(child: Builder(builder: (context) {
CoolKeyboard.init(this, context);

List<Widget> children = [widget.child];
if (_keyboardBuilder != null) {
children.add(Builder(
builder: _keyboardBuilder!,
));
}
return Directionality(
textDirection: widget.textDirection,
child: Stack(
children: children,
));
}));
}

setKeyboard(WidgetBuilder _keyboardBuilder) {
_keyboardBuilder = _keyboardBuilder;
Future.delayed(const Duration(milliseconds: 50)).then((e) {
setState(() {});
});
}

clearKeyboard() {
if (_keyboardBuilder != null) {
_keyboardBuilder = null;
setState(() {});
}
}
}

二。KeybordMediaQuery

我们再回顾一下什么是MediaQuery(如果需要详细了解,可以在我的专栏中搜索此文章），MediaQuery媒体查询会返回MediaQueryData，其中有个一重要数据就是viewInsets，这个是键盘遮挡UI的部分，那我们的思路很清晰，就是在我们自己的键盘弹出的时候更新当前视图的viewInsets值

1.定义一个键盘高度的监听

ValueNotifier<double> keyboardHeightNotifier = CoolKeyboard.getKeyboardHeightNotifier();

@override
void initState(){
super.initState();
CoolKeyboard.getKeyboardHeightNotifier().addListener(onUpdateHeight);
}

2.当键盘高度设置时候，覆盖系统的viewInsets值，就实现了类似系统键盘的弹出功能了。

var data = MediaQuery.maybeOf(context);
data ??= MediaQueryData.fromWindow(WidgetsBinding.instance.window);
var bottom = CoolKeyboard.getKeyboardHeightNotifier().value != 0 ? CoolKeyboard.getKeyboardHeightNotifier().value : data.viewInsets.bottom;
return MediaQuery(
        child: widget.child,
        data:data.copyWith(
        ​​​​​​​viewInsets: data.viewInsets.copyWith(
        ;bottom: bottom
        )
)
);

完整代码如下

class KeyboardMediaQuery extends StatefulWidget{
final Widget child;

KeyboardMediaQuery({required this.child});

@override
State<StatefulWidget> createState() =>KeyboardMediaQueryState();

}

class KeyboardMediaQueryState extends State<KeyboardMediaQuery >{
double keyboardHeight = 0;
ValueNotifier<double> keyboardHeightNotifier = CoolKeyboard.getKeyboardHeightNotifier();

@override
void initState(){
super.initState();
CoolKeyboard.getKeyboardHeightNotifier().addListener(onUpdateHeight);
}

@override
Widget build(BuildContext context) {

// TODO: implement build
var data = MediaQuery.maybeOf(context);
data ??= MediaQueryData.fromWindow(WidgetsBinding.instance.window);
var bottom = CoolKeyboard.getKeyboardHeightNotifier().value != 0 ? CoolKeyboard.getKeyboardHeightNotifier().value : data.viewInsets.bottom;
// TODO: implement build
return MediaQuery(
child: widget.child,
data:data.copyWith(
viewInsets: data.viewInsets.copyWith(
bottom: bottom
)
)
);
}

onUpdateHeight(){
try{
setState(()=>{});
}catch(_){
WidgetsBinding.instance.addPostFrameCallback((_){
setState(()=>{});
});
}
}

@override
void dispose(){
super.dispose();
CoolKeyboard.getKeyboardHeightNotifier().removeListener(onUpdateHeight);
}
}