Flutter_textfield实现富文本

textfield基本使用

TextField(
  maxLines: 100,
  textAlign: TextAlign.right,
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
    border: InputBorder.none,
    hintText: "请输入",
    hintStyle: TextStyle(fontSize: 14,color: Colors.grey),
  ),
),

简单富文本可以直接设置

var  _editingController = TextEditingController()
_editingController.value = TextEditingValue(text: str, composing: TextRange(start: 1, end: 13));

image.png

修改文本颜色需要重写 buildTextSpan 方法, 更改 TextStyle

class OverTextEditingController extends TextEditingController{
  
  @override
  TextSpan buildTextSpan({BuildContext context, TextStyle style , bool withComposing}) {
   if (!value.isComposingRangeValid || !withComposing) {
      return TextSpan(style: style, text: text);
    }
    final TextStyle composingStyle = style.merge(
      const TextStyle(Colors: Colors.blue),
    );
    return TextSpan(
      style: style,
      children: [
        TextSpan(text: value.composing.textBefore(value.text)),
        TextSpan(
          style: composingStyle,
          text: value.composing.textInside(value.text),
        ),
        TextSpan(text: value.composing.textAfter(value.text)),
      ],
    );
  }
}

var  _editingController = TextEditingController()
要改成
var  _editingController = OverTextEditingController()  
#如若报属性不符错误   需重新运行项目

image.png

多重富文本也在 TextSpan buildTextSpan({BuildContext context, TextStyle style , bool withComposing}) 方法中修改
针对富文本需求进行 TextSpan

end