0

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

要自定义的文本表单字段示例

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

和

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

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

4

2 回答 2

1

我终于找到了符合我要求的要点。对于那些正在寻找我的问题的答案的人，您似乎必须覆盖 EditableText （如何动态更改文本字段中特定文本的颜色？）。但是，这只是一个草稿，目前还不能正常工作。我将尝试遵循这条路径并在这篇文章中添加我的答案。

编辑：

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

  @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 可能会在不满足范围结束时引发异常。

于 2020-08-02T10:53:29.657 回答
0

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

使用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(),
    ],
  ),
 );
于 2020-08-02T09:23:48.397 回答