【Flutter】 TextField限制长度时, 第三方手写输入法、ios原始拼音输入法输入被吞问题

本文主要是介绍【Flutter】 TextField限制长度时, 第三方手写输入法、ios原始拼音输入法输入被吞问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题描述

 TextField限制长度时, 当你的输入字符长度已经到了最大值-1时,使用第三方手写输入法或者ios原生拼音输入法输入liang(什么拼音都行,这里只是举例),输到i那么li都会消失。

原因分析

这是因为第三方手写输入法或者ios原生拼音输入法,虽然还没选中哪个汉子,但是输入的拼音字母已经显示在输入框了,那么这个字符串就会算作已经输入了,再计算TextField字符串长度的时候会加上未选中的拼音,跟最大长度作对比,字符数比最大值还要大的时候就会因为TextField的判定机制使未选中的字符消失。

解决方法

TextField除了使用maxLength设置最大长度外,还可以使用inputFormatters限制:

            TextField(controller: _controller,inputFormatters: [LengthLimitingTextInputFormatter(maxLength),],......

源码分析

LengthLimitingTextInputFormatter是flutter原生的类,代码如下:

class LengthLimitingTextInputFormatter extends TextInputFormatter {LengthLimitingTextInputFormatter(this.maxLength, {this.maxLengthEnforcement,}) : assert(maxLength == null || maxLength == -1 || maxLength > 0);final int? maxLength;  //传入的最大长度//确定应如何强制执行 maxLength 限制,默认为 MaxLengthEnforcement.enforcedfinal MaxLengthEnforcement? maxLengthEnforcement; //获取默认的maxLengthEnforcement,总共有三种,//有兴趣可以看文章最后或者看源码注释研究一下,这个问题的解决方法不需要这个方法static MaxLengthEnforcement getDefaultMaxLengthEnforcement([TargetPlatform? platform,]) {if (kIsWeb) {return MaxLengthEnforcement.truncateAfterCompositionEnds;} else {switch (platform ?? defaultTargetPlatform) {case TargetPlatform.android:case TargetPlatform.windows:return MaxLengthEnforcement.enforced;case TargetPlatform.iOS:case TargetPlatform.macOS:case TargetPlatform.linux:case TargetPlatform.fuchsia:return MaxLengthEnforcement.truncateAfterCompositionEnds;}}}//截断字符串@visibleForTestingstatic TextEditingValue truncate(TextEditingValue value, int maxLength) {final CharacterRange iterator = CharacterRange(value.text);if (value.text.characters.length > maxLength) {iterator.expandNext(maxLength);}final String truncated = iterator.current;return TextEditingValue(text: truncated,selection: value.selection.copyWith(baseOffset: math.min(value.selection.start, truncated.length),extentOffset: math.min(value.selection.end, truncated.length),),composing: !value.composing.isCollapsed && truncated.length > value.composing.start? TextRange(start: value.composing.start,end: math.min(value.composing.end, truncated.length),): TextRange.empty,);}//顾名思义,更新字符串,每次输入的值发生改变时都会调用。//根据字符串最大值以及maxLengthEnforcement判断返回的是什么。@overrideTextEditingValue formatEditUpdate(TextEditingValue oldValue,TextEditingValue newValue,) {final int? maxLength = this.maxLength;if (maxLength == null ||maxLength == -1 ||newValue.text.characters.length <= maxLength) {return newValue;}assert(maxLength > 0);switch (maxLengthEnforcement ?? getDefaultMaxLengthEnforcement()) {case MaxLengthEnforcement.none:return newValue;case MaxLengthEnforcement.enforced:if (oldValue.text.characters.length == maxLength && oldValue.selection.isCollapsed) {return oldValue;}return truncate(newValue, maxLength);case MaxLengthEnforcement.truncateAfterCompositionEnds:if (oldValue.text.characters.length == maxLength &&!oldValue.composing.isValid) {return oldValue;}if (newValue.composing.isValid) {return newValue;}return truncate(newValue, maxLength);}}
}

输入框显示的是什么是formatEditUpdate可以决定的,使用这次的更改主要是formatEditUpdate。

解决代码 

参考LengthLimitingTextInputFormatter写一个新的TextInputFormatter。

这里只改了formatEditUpdate,以及不需要判定maxLengthEnforcement,所以把相关代码也删了。

class MyLengthLimitingTextInputFormatter extends TextInputFormatter{final int? maxLength;MyLengthLimitingTextInputFormatter(this.maxLength) : assert(maxLength == null || maxLength == -1 || maxLength > 0);@visibleForTestingstatic TextEditingValue truncate(TextEditingValue value, int maxLength) {final CharacterRange iterator = CharacterRange(value.text);if (StringUtil.getTextLength(value.text) > maxLength) {iterator.expandNext(maxLength);}final String truncated = iterator.current;return TextEditingValue(text: truncated,selection: value.selection.copyWith(baseOffset: math.min(value.selection.start, truncated.length),extentOffset: math.min(value.selection.end, truncated.length),),composing: !value.composing.isCollapsed && truncated.length > value.composing.start? TextRange(start: value.composing.start,end: math.min(value.composing.end, truncated.length),): TextRange.empty,);}//oldValue就是显示在输入框上的旧值,newValue就是显示在输入框上的旧值加你新输入的字符串@overrideTextEditingValue formatEditUpdate(TextEditingValue oldValue,TextEditingValue newValue,) {final int? maxLength = this.maxLength;//加上你新输入的字符串都没大于限制的最大值就直接在输入框显示新字符串if (maxLength == null ||maxLength == -1 ||newValue.text.characters.length <= maxLength) {return newValue;}assert(maxLength > 0);//已经达到最大值且新输入的字符串不是正在输入的状态//(真正输入存活状态:拼音拼出的字还没选中(下面会有下划线)或者手写的字还没在输入法选中(下面会有下划线);//存活状态就是反过来,选中了或者输入英文的时候就是打出的每个字母都直接到输入框,下面也不会有下划线) ,直接返回旧的值if (oldValue.text.characters.length == maxLength && !newValue.composing.isValid) {return oldValue;}//已经达到最大值且新输入的字符串是正在输入的状态,显示旧值+你新输入的值=newValue,//就是这句解决了拼音会被吞的问题if (oldValue.text.characters.length == maxLength && newValue.composing.isValid){return newValue;}// Enforced to return a truncated value.return truncate(newValue, maxLength);}}

使用

将LengthLimitingTextInputFormatter换成MyLengthLimitingTextInputFormatter就行。

            TextField(controller: _controller,inputFormatters: [MyLengthLimitingTextInputFormatter(maxLength),],......

缺陷

但是这样的解决方法还有一个问题:只要你英文打的够快,然后快速选择还在输入法上没消失的待选择的字母,它就能吞了前面的字。

附上这个问题没用到的:maxLengthEnforcement的区别

 源码:

enum MaxLengthEnforcement {/// No enforcement applied to the editing value. It's possible to exceed the/// max length.none,/// Keep the length of the text input from exceeding the max length even when/// the text has an unfinished composing region.enforced,/// Users can still input text if the current value is composing even after/// reaching the max length limit. After composing ends, the value will be/// truncated.truncateAfterCompositionEnds,
}

none:限制长度后还是可以随便输入 ,设了等于没设;

enforced:当字符长度达到限制长度时,正在输入的字符停止输入后会强制消失,例如输入英文字符停手后就会从输入法消失

truncateAfterCompositionEnds:当字符长度达到限制长度时,但正在输入的字符强制不会消失,也就是输入法里面预选的字不会消失

另一个方法

网上找到的另一个我还没验证的方法:

https://juejin.cn/post/6844904096407765005

这篇关于【Flutter】 TextField限制长度时, 第三方手写输入法、ios原始拼音输入法输入被吞问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1031460

相关文章

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、