无法在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.

有用于RTF编辑器的库(例如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屋！