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

Question

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

USER-0123456789

其中文本USER(“-”字符之前的所有文本)应为红色，其他应为黑色。

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

Answer 1

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

MyTextController 类:

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(),
),

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