百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

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

wptr33 2025-04-26 21:39 35 浏览

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

注意:无特殊说明,flutter版本为3.0+

此文大部分代码内容来自
https://github.com/Im-Kevin/cool_ui,感谢大神指路,喜欢的可以去看源码,当然也有区别于原作者的实现,敬请关注。


第一篇文章中,我们介绍了如何像系统键盘一样推起组件,那么这一篇中我们看一下初始化中做了哪些操作

实现数字键盘第一步后,那么我们下一步关键点就是如何监听输入,我们知道Flutter是通过原生通道向Android和ios系统发送指令的,比如键盘的输入一个值是调用"flutter/textinput"向原生发送输入指令的。

一。键盘初始化

初始化中加一个拦截器,用我们自身的方式处理

static init(KeyboardRootState root, BuildContext context) {
_root = root;
_context = context;
interceptorInput(); //键盘的拦截,
}

static interceptorInput() {
if (isInterceptor) return;
isInterceptor = true;

WidgetsBinding.instance.defaultBinaryMessenger

.setMessageHandler("flutter/textinput", _textInputHanlde); //使用自身的处理方式
}

这里有重要概念BinaryMessenger,这是个抽象类,官方解释如下

/// A messenger which sends binary data across the Flutter platform barrier.

我们可以覆盖他的setMessageHandler方法去处理,我么实现的是键盘,那么覆盖的就是”flutter/textinput”的处理方法。

二。关键方法覆盖

1. 'TextInput.show'

TextField 获取焦点后调用该方法,那么此方法中我们要打开键盘

static openKeyboard() {
var keyboardHeight = _currentKeyboard!.getHeight(_context!); //获取配置高度

_keyboardHeightNotifier.value = keyboardHeight;

if (_root!.hasKeyboard && _pageKey != null) return;
_pageKey = GlobalKey<KeyboardPageState>();
var tempKey = _pageKey;
_root!.setKeyboard((ctx) {
if (_currentKeyboard != null &&
_keyboardHeightNotifier.value != 0) {

return KeyboardPage(
key: tempKey,
builder: (ctx) {
return _currentKeyboard!
.builder(ctx, _keyboardController!, _keyboardParam);
},height:
_keyboardHeightNotifier.value
);
} else {
return Container();
}
});

打开键盘的逻辑就是添加一个builder,这个builder是键盘页面,并设置高度,并赋值给_keyboardHeightNotifier,这个在上一篇有讲过,会自动覆盖viewInsets的值,添加系统级别的遮盖

2. 'TextInput.hide'

隐藏键盘,调用root!.clearKeyboard(),也就是讲builder设置为空。

3. 'TextInput.setClient'

在TextInput.setClient中根据输入框定义的键盘类型找出对应键盘对应的键盘配置,以及初始输入变更监听KeyboardController。

这时候我们可以自定义我们的类型和KeyboardController,用于响应我们自己的键盘事件。

关键代码如下

_keyboardController = KeyboardController(client: client!)
..addListener(() {
var callbackMethodCall = MethodCall(
"TextInputClient.updateEditingState", [
_keyboardController!.client.connectionId,
_keyboardController!.value.toJSON()
]);
WidgetsBinding.instance.defaultBinaryMessenger
.handlePlatformMessage("flutter/textinput",
_codec.encodeMethodCall(callbackMethodCall), (data) {});
});

三。KeyboardController

控制文字的输入,和实现一系列的按钮

addText(),deleteOne(),用于输入和删除字符,还有换行,完成等操作

/// 完成
doneAction() {

CoolKeyboard.sendPerformAction(TextInputAction.done);

}

/// 下一个
nextAction() {

CoolKeyboard.sendPerformAction(TextInputAction.next);

}

/// 上一个
preAction() {

CoolKeyboard.sendPerformAction(TextInputAction.previous);

}

其中sendPerformAction 会调用原生通道"
TextInputClient.performAction",用于响应键盘非输入操作,这些操作定义在text_input.dart中。

static sendPerformAction(TextInputAction action) {


var callbackMethodCall = MethodCall("TextInputClient.performAction",
[_keyboardController!.client.connectionId, action.toString()]);


WidgetsBinding.instance.defaultBinaryMessenger.handlePlatformMessage(
"flutter/textinput",
_codec.encodeMethodCall(callbackMethodCall),
(data) {});
}

四。实现键盘组件

这个应该是全文最简单的部分,也是最基础的部分,用Row和Column实现横排竖排按钮

用controller.deleteOne() 实现删除用

controller.nextAction() 实现换行

用controller.doneAction() 实现删完成

问题:在实现过程中遇到一个问题,就是我所有的按钮都使用onTap实现点击事件,在发生连续点击的时候就会有字符丢失的情况

解决方案

GestureDetector(

onPanDown: (details) {
controller.addText(value ?? title);
},

onPanDown,触碰屏幕的时候调用,会优先onTap执行,具体的解释可以参考GestureDetector的源码,一共有7大类25种。

相关推荐

redis的八种使用场景

前言:redis是我们工作开发中,经常要打交道的,下面对redis的使用场景做总结介绍也是对redis举报的功能做梳理。缓存Redis最常见的用途是作为缓存,用于加速应用程序的响应速度。...

基于Redis的3种分布式ID生成策略

在分布式系统设计中,全局唯一ID是一个基础而关键的组件。随着业务规模扩大和系统架构向微服务演进,传统的单机自增ID已无法满足需求。高并发、高可用的分布式ID生成方案成为构建可靠分布式系统的必要条件。R...

基于OpenWrt系统路由器的模式切换与网页设计

摘要:目前商用WiFi路由器已应用到多个领域,商家通过给用户提供一个稳定免费WiFi热点达到吸引客户、提升服务的目标。传统路由器自带的Luci界面提供了工厂模式的Web界面,用户可通过该界面配置路...

这篇文章教你看明白 nginx-ingress 控制器

主机nginx一般nginx做主机反向代理(网关)有以下配置...

如何用redis实现注册中心

一句话总结使用Redis实现注册中心:服务注册...

爱可可老师24小时热门分享(2020.5.10)

No1.看自己以前写的代码是种什么体验?No2.DooM-chip!国外网友SylvainLefebvre自制的无CPU、无操作码、无指令计数器...No3.我认为CS学位可以更好,如...

Apportable:拯救程序员,IOS一秒变安卓

摘要:还在为了跨平台使用cocos2d-x吗,拯救objc程序员的奇葩来了,ApportableSDK:FreeAndroidsupportforcocos2d-iPhone。App...

JAVA实现超买超卖方案汇总,那个最适合你,一篇文章彻底讲透

以下是几种Java实现超买超卖问题的核心解决方案及代码示例,针对高并发场景下的库存扣减问题:方案一:Redis原子操作+Lua脚本(推荐)//使用Redis+Lua保证原子性publicbo...

3月26日更新 快速施法自动施法可独立设置

2016年3月26日DOTA2有一个79.6MB的更新主要是针对自动施法和快速施法的调整本来内容不多不少朋友都有自动施法和快速施法的困扰英文更新日志一些视觉BUG修复就不翻译了主要翻译自动施...

Redis 是如何提供服务的

在刚刚接触Redis的时候,最想要知道的是一个’setnameJhon’命令到达Redis服务器的时候,它是如何返回’OK’的?里面命令处理的流程如何,具体细节怎么样?你一定有问过自己...

lua _G、_VERSION使用

到这里我们已经把lua基础库中的函数介绍完了,除了函数外基础库中还有两个常量,一个是_G,另一个是_VERSION。_G是基础库本身,指向自己,这个变量很有意思,可以无限引用自己,最后得到的还是自己,...

China&#39;s top diplomat to chair third China-Pacific Island countries foreign ministers&#39; meeting

BEIJING,May21(Xinhua)--ChineseForeignMinisterWangYi,alsoamemberofthePoliticalBureau...

移动工作交流工具Lua推出Insights数据分析产品

Lua是一个适用于各种职业人士的移动交流平台,它在今天推出了一项叫做Insights的全新功能。Insights是一个数据平台,客户可以在上面实时看到员工之间的交流情况,并分析这些情况对公司发展的影响...

Redis 7新武器:用Redis Stack实现向量搜索的极限压测

当传统关系型数据库还在为向量相似度搜索的性能挣扎时,Redis7的RedisStack...

Nginx/OpenResty详解,Nginx Lua编程,重定向与内部子请求

重定向与内部子请求Nginx的rewrite指令不仅可以在Nginx内部的server、location之间进行跳转,还可以进行外部链接的重定向。通过ngx_lua模块的Lua函数除了能实现Nginx...