仅对 TextForm 文本的一部分着色

Question

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

警告我不是在寻找 RichText 小部件，因为我想自定义 TextFormField 小部件或任何具有可编辑文本的小部件。此小部件在列表中使用，因此我不想将“预览”小部件与我的输入小部件一起使用。

AND

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

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

Answer 1

这可能不是您想要的，但可能会以某种方式帮助您入门。

使用 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(),
    ],
  ),
 );

Answer 2

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

上添加我的答案

编辑：

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

  @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 部分。删除字符时引发错误，因为当范围结束不符合时，范围可能会引发异常。

仅对 TextForm 文本的一部分着色

Colorize only a part of a TextForm text

flutter

textformfield