当前位置: 首页>移动开发>正文

flutter 自定义Themem Color flutter 自定义webview 软键盘

flutter 自定义Themem Color flutter 自定义webview 软键盘,flutter 自定义Themem Color flutter 自定义webview 软键盘_flutter,第1张

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

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


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

实现数字键盘第一步后,那么我们下一步关键点就是如何监听输入,我们知道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();
     }
 });

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

2.&nbsp;'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种。


https://www.xamrdz.com/mobile/4af1961898.html

相关文章: