Flutter 苹果原生拼音键盘在TextField上输入异常 | 拼音输入过程回调问题

Flutter 正常文本回调通过onChange 处理， 也可以通过 监听TextEditingController 处理

监听TextEditingController

通过value.composing来判断，第一个判断是直接输入的，那就直接返回一个普通样式。第二个判断就是有输入未完成字符的，**value.composing.textInside(value.text)**获取到的就是输入未完成的字符，默认是添加了一个下划线的样式，类似苹果原生输入里面一个灰黑色的背景一样，这样就可以直接实现和原生中文键盘输入一样的效果。

所以 直接继承 TextEditingController 重写这个富文本方法即可处理

class ChangeTextEditingController extends TextEditingController {
  var completeText = '';

	// 有使用到其他方法可以直接添加到这里继承 使用 
  ChangeTextEditingController.fromValue(TextEditingValue value)
      : super.fromValue(value);

  @override
  TextSpan buildTextSpan(
      {BuildContext context, 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)),
    ]);
  }
}

应用 : 在初始化页面或者是视图 initState 添加

// 初始化属性
  String lastInput = "";
  ChangeTextEditingController controller;

  @override
  void initState() {
    super.initState();

    controller = ChangeTextEditingController.fromValue(
      TextEditingValue(
        text: widget.defaultContent,
        selection: TextSelection.fromPosition(
          TextPosition(
              affinity: TextAffinity.downstream,
              offset: widget.defaultContent.length),
        ),
      ),
    );

    controller.addListener(() {
      if (lastInput != controller.completeText) {
        lastInput = controller.completeText;

        ///通知onChanged 回调。
        _onChange(controller.completeText);
      }
    });
  }