解决Flutter拼音输入过程回调问题

项目需要根据用户搜索框输入内容实时搜索查询，但是测试时发现不同手机不同输入法（自带或第三方）拼音输入时回调是不一样的。比如拼音输入“有”字，正常拼音输入过程是：分别输入“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就好了。

class PinYinTextEditController extends TextEditingController{
  ///拼音输入完成后的文字
  var completeText = '';

  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    ///拼音输入完成
    if (!value.composing.isValid || !withComposing) {
      if(completeText!=value.text){
        completeText = value.text;
        WidgetsBinding.instance.addPostFrameCallback((_){
          notifyListeners();
        });
      }
      return TextSpan(style: style, text: text);
    }
    
    ///返回输入样式，可自定义样式
    final TextStyle composingStyle = style.merge(
      const TextStyle(decoration: TextDecoration.underline),
    );
    return TextSpan(
        style: style,
        children: <TextSpan>[
          TextSpan(text: value.composing.textBefore(value.text)),
          TextSpan(
            style: composingStyle,
            text:
            value.composing.isValid && !value.composing.isCollapsed?
            value.composing.textInside(value.text):"",
          ),
          TextSpan(text: value.composing.textAfter(value.text)),
        ]);
  }

}

使用的时候，绑定controller到TextField，再给controller添加listener，获取到completeText。因为listener中不只有我们刚刚的notifyListener会回调，其他属性更改也会一直回调，因此我们还需要建一个lastInput属性记录起来，对比判断一下再执行我们要的通知更新操作就ok了。

 ///记录上次结果
 var lastInput = "";

  @override
  void initState() {
    super.initState();
    controller =  PinYinTextEditController();

    ///controller监听
    controller.addListener(() {
      if (lastInput != controller.completeText) {
        lastInput = controller.completeText;
        ///通知onChanged
        widget.onChanged(controller.completeText);
      }
    });
  }