项目需要根据用户搜索框输入内容实时搜索查询,但是测试时发现不同手机不同输入法(自带或第三方)拼音输入时回调是不一样的。比如拼音输入“有”字,正常拼音输入过程是:分别输入“Y”、“O”、“U”,然后候选词列表中选中“有”,所以总共有4步。有些输入法,onChanged回调只在候选词选择“有”才回调最终的结果:“有”。有些输入法,整个过程全部回调,即回调4次:“Y”、“YO”、“YOU”、“有”,此时回调会对搜索内容造成干扰,就需要想办法解决了。
其实其他平台也有考虑到这个问题,iOS及RN回调都有composition属性来让开发人员识别,但是搜索flutter似乎没有相关的,并且网络上也没有找到flutter此问题的讨论及解决方案。
我们知道,flutter的输入回调不仅可以通过onChanged,还可以通过监听controller来实现。于是就想进TextEditingController里找找有没有办法。进源码,看到这里的时候,发现其实flutter是有识别到这个问题的(只是可能没有开放属性出来而已)。
分析一下这段源码,这个方法是用来构建输入框中的文字及样式的,我们发现其中有针对输入未完成字符的样式。通过value.composing来判断,第一个判断是直接输入的,那就直接返回一个普通样式。第二个判断就是有输入未完成字符的,value.composing.textInside(value.text)获取到的就是输入未完成的字符,默认是添加了一个下划线的样式(composingStyle)。根据注释,编写人员提示我们可以重写此方法改写样式。没错,既然这里可以获取到输入未完成的字符,又可以重写,我们就可以在这里面做手脚来实现我们的目的了!
很简单,新建一个controller继承自TextEditingController,重写buildTextSpan方法。然后我们可以参照源码的判断条件,
if (!value.composing.isValid || !withComposing)
忽略掉其他的,就可以拿到输入完成的字符了。因为此方法会多次回调,需要新建一个属性completeText记录比对。然后,我们在里面再通知更新。因为buildTextSpan方法执行时已经在进行render操作了,不可以直接notifyListeners,所以我们在postFrame再通知。至于样式,不修改的话直接调用super就好了。
使用的时候,绑定controller到TextField,再给controller添加listener,获取到completeText。因为listener中不只有我们刚刚的notifyListener会回调,其他属性更改也会一直回调,因此我们还需要建一个lastInput属性记录起来,对比判断一下再执行我们要的通知更新操作就ok了。