项目中存在一个输入框，只能提交中文字符串，于是使用了如下的方法实现
TextField(
/// 输入文本格式过滤
inputFormatters: [
/// 输入的内容长度为 10 位
LengthLimitingTextInputFormatter(10),
/// 只能输入汉字或者字母或数字
WhitelistingTextInputFormatter(
RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]"),
),
],
),
但是上线运行之后，发现在iOS原生拼音输入法中，只能一个字一个字输入，每次输入超过一个字就会直接变成拼音字母，并且长度限制在遇到中文拼音输入法后也会失效
有问题的输入框.gif
于是通过自定义过滤器的方法，解决了这个问题
TextField(
inputFormatters: [
/// 输入的内容长度为 10 位
CustomizedLengthTextInputFormatter(10),
/// 只能输入汉字或者字母或数字
CustomizedTextInputFormatter(
filterPattern: RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]"),
),
],
),
修复后的输入框.gif
/// 自定义兼容中文拼音输入法正则校验输入框
class CustomizedTextInputFormatter extends TextInputFormatter {
final Pattern filterPattern;
CustomizedTextInputFormatter({this.filterPattern})
: assert(filterPattern != null);
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue,
TextEditingValue newValue,
) {
if (newValue.isComposingRangeValid) return newValue;
return FilteringTextInputFormatter.allow(filterPattern)
.formatEditUpdate(oldValue, newValue);
}
}
/// 自定义兼容中文拼音输入法长度限制输入框
class CustomizedLengthTextInputFormatter extends TextInputFormatter {
final int maxLength;
CustomizedLengthTextInputFormatter(this.maxLength);
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue,
TextEditingValue newValue,
) {
if (newValue.isComposingRangeValid) return newValue;
return LengthLimitingTextInputFormatter(maxLength)
.formatEditUpdate(oldValue, newValue);
}
}
关键方法在于判断当前输入框是否存在未完成的字符串，如果存在，则不做限制，否则根据参数进行限制
/// Whether the [composing] range is a valid range within [text].
///
/// Returns true if and only if the [composing] range is normalized, its start
/// is greater than or equal to 0, and its end is less than or equal to
/// [text]'s length.
///
/// If this property is false while the [composing] range's `isValid` is true,
/// it usually indicates the current [composing] range is invalid because of a
/// programming error.
bool get isComposingRangeValid => composing.isValid && composing.isNormalized && composing.end <= text.length;
但是属性 composing 听说还存在bug，使用的时候要注意，很有可能还有坑等着😄
参考：
https://blog.csdn.net/NNadn/article/details/90673361
https://blog.csdn.net/qq_27494201/article/details/106638855
解决方案：
https://juejin.im/post/6886279718543294478
https://github.com/flutter/flutter/pull/69553
顿悟：
https://github.com/AlexV525
感谢🙏 Alex 大神！！！
