无法在 Flutter 中扩展 TextField? [英] Not possible to extend TextField in Flutter?

问题描述

我正在尝试修改文本字段，以便可以为同一文本字段中的特定单词设置不同的颜色.例如我想要一个苹果"，苹果"这个词应该是绿色的，其余的文字应该是黑色的.

I'm trying to modify a text field so that I can set different colors to specific words in the same text field. For example "I want an apple" and the word "apple" should be green, rest of the text should be black.

有富文本编辑器的库(例如 zefyr、extended_text_field)，但我还在 stackoverflow 上找到了 AnnotatedEditableText 的示例(https://stackoverflow.com/a/57846261).我喜欢最后一个解决方案 (AnnotatedEditableText)，但我想使用 TextField 来获得更丰富的功能，主要是我无法在只读可编辑文本中工作的文本选择.

There are libraries for rich text editors (e.g. zefyr, extended_text_field) but I've also found an example of an AnnotatedEditableText here on stackoverflow (https://stackoverflow.com/a/57846261). I like this last solution (AnnotatedEditableText) but I want to use TextField to get richer functionality, primarily text selection that I cannot get to work in a readonly editable text.

此外，当将 expands: true 设置为 TextField 的参数时，小部件会正确扩展以填充该区域.为 EditableText 设置相同的属性时，没有任何反应.不知道为什么.

Also, when setting expands: true as parameter to TextField the widget correctly expands to fill the area. When setting the same property for an EditableText, nothing happens. Not sure why.

所以 - 我想将 TextField 与 AnnotatedEditableText 小部件一起使用.我可以在不复制粘贴整个 TextField 类的情况下完成此操作吗?这是我收集的:

So - I want to use a TextField with the AnnotatedEditableText widget. Can I accomplish this without copy-pasting the entire TextField class? Here's what I've gathered:

• _TextFieldState 是私有的，无法扩展，但 EditableTextState 不是私有的，因此可以扩展小部件.
• TextField 小部件不支持 EditableText 小部件的自定义实现.

有什么想法吗?为什么 _TextFieldState 是私有的，而 EditableTextState 不是私有的?

Any ideas? Why is _TextFieldState private but EditableTextState isn't private?

推荐答案

带有以下控制器:

class FruitColorizer extends TextEditingController {
  final Map<String, TextStyle> mapping;
  final Pattern pattern;

  FruitColorizer(this.mapping) : pattern = RegExp(mapping.keys.map((key) => RegExp.escape(key)).join('|'));
  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<InlineSpan> children = [];
    // splitMapJoin is a bit tricky here but i found it very handy for populating children list
    text.splitMapJoin(pattern, 
      onMatch: (Match match) {
        children.add(TextSpan(text: match[0], style: style.merge(mapping[match[0]])));
      },
      onNonMatch: (String text) {
        children.add(TextSpan(text: text, style: style));
      },
    );
    return TextSpan(style: style, children: children);
  }
}

将其用作:

TextField(
  style: TextStyle(fontSize: 32),
  controller: FruitColorizer({
    'apple': TextStyle(color: Colors.green, decoration: TextDecoration.underline),
    'orange': TextStyle(color: Colors.orange, shadows: kElevationToShadow[2]),
  }),
),

并输入您的TextField:我吃了两个苹果、一个香蕉和三个橙子"

and type in your TextField: "i have eaten two apples, one banana and three oranges"

编辑

如果你只想使用颜色，你可以添加命名构造函数:

if you want to use just colors you can add the named constructor:

FruitColorizer.fromColors(Map<String, Color> colorMap)
: this(colorMap.map((text, color) => MapEntry(text, TextStyle(color: color))));

并像这样使用它:

controller: FruitColorizer.fromColors({
  'apple': Colors.green,
  'orange': Colors.orange,
}),

这篇关于无法在 Flutter 中扩展 TextField?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！