用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）
注意：无特殊说明，flutter版本为3.0+
此文大部分代码内容来自 https://github.com/Im-Kevin/cool_ui，感谢大神指路，喜欢的可以去看源码，当然也有区别于原作者的实现，敬请关注。
为什么需要自定义键盘？自定义键盘可以说在客户端原生开发中有很多地方需要用到，比如做一个数字键盘支持支付业务，特殊内容的输入，或者响应其他特殊需求。作者在开发中也遇到自定义键盘的需求，当时是初学，在github和pub.flutter-io.cn中查了大量的插件，觉得cool_ui中的自定义键盘能满足，再次感谢作者。此文从cool_ui的自定义键盘出发，细说一下解决思路，希望给初学者在自定组件和理解Flutter运行原理提供帮助。
自定义键盘一定是一个Widget组件，那么它至少要实现类似系统键盘的以下功能：
- 当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);
}
}
