Flutter：如何更改 TextField 中特定字符之前所有文本的颜色？

Question

我正在尝试在 Flutter App 中创建一个 TextField 小部件，我希望允许用户在其中插入如下文本字符串：

USER-0123456789

其中文本 USER（'-' 字符之前的所有文本）应为红色，其他应为黑色颜色。

现在的问题是我不知道有什么方法可以做到这一点。经过一些研究，我发现我可以通过使用 RichText Widget 使用普通的 Text Widget 来做到这一点。但是，我不知道 TextField Widget 有任何类似的小部件。请帮助我摆脱这种情况。

Answer 1

我能够按照 pskink 的建议使用 if 语句创建两个 TextSpan 来解决问题。

MyTextControllerClass:

class MyTextController extends TextEditingController {
  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<InlineSpan> children = [];
    if(text.contains('-')){
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text.substring(0, text.indexOf('-'))));
      children.add(TextSpan(text: text.substring(text.indexOf('-'))));
    } else {
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text));
    }
    return TextSpan(style: style, children: children);
  }
}

TextFormField中的用法：

TextFormField(
    keyboardType: TextInputType.text,
    controller: MyTextController(),
),

关于光标错位错误的更新： 我找不到解决此错误的方法。如果我在不久的将来找到它，我会在这里更新它。我所做的是，只是隐藏光标本身，这样就不会被注意到。

Flutter：如何更改 TextField 中特定字符之前所有文本的颜色？

Fultter: How to change color of all text before a particular character in TextField?

textfield

flutter

flutter-widget