仅着色 TextForm 文本的一部分

Question

我想知道是否有一种方法可以更准确地自定义 TextFormField。我不想改变整个文本的颜色，而只是改变它的一部分。例如，下面是上面提到的 TextFormField，我想通过添加红色来突出显示“には”（即大括号之间的内容）。我想避免创建多个 TextFormField 来执行此操作，因为之后组装文本会很麻烦，但我不知道是否可能。

警告 我不是在寻找 RichText 小部件，因为我想自定义 TextFormField 小部件或任何带有可编辑文本的小部件。 这个小部件在列表中使用，所以我不想在我的输入小部件中使用“预览”小部件。

与

我不需要完整的 RichTextEditor，因为用户不应该能够修改颜色。只有花括号之间的部分应该自动着色。

期待看看你们能想出什么样的解决方案！

Answer 1

我终于找到了符合我要求的要点。对于那些正在寻找我的问题答案的人，您似乎必须覆盖 EditableText (How to change color of particular text in a text field dynamically?)。但是，这只是一个草稿，目前还不能正常工作。我将尝试遵循此路径并在此帖子中添加我的答案。

编辑：

您唯一需要更改此答案的内容如下：

  @override
  TextSpan buildTextSpan() {
    final String text = textEditingValue.text;
    int textLength = text.length;
    if (widget.annotations != null && textLength > 0) {
      var items = getRanges();
      var children = <TextSpan>[];
      for (var item in items) {
        if (item.range.end < textLength) {
          children.add(
            TextSpan(style: item.style, text: item.range.textInside(text)),
          );
        } else if (item.range.start <= textLength) {
          children.add(
            TextSpan(
                style: item.style,
                text: TextRange(start: item.range.start, end: text.length)
                    .textInside(text)),
          );
        }
      }
      return new TextSpan(style: widget.style, children: children);
    }

    return new TextSpan(style: widget.style, text: text);
  }
}

解释： 您只需更正 buildTextSpan 部分。删除字符时会引发错误，因为 Range 可能会在不满足范围结束时引发异常。

Answer 2

这可能不是你想要的，但它可能会帮助你以某种方式开始。

使用RichText 小部件。

var text = new RichText(
  text: new TextSpan(
    style: new TextStyle(
      fontSize: 10.0,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Text1'),
      new TextSpan(text: 'Text2', style: new TextStyle(),
    ],
  ),
 );