TextField 中文本的样式部分答案

【问题标题】：Style part of text in TextFieldTextField 中文本的样式部分
【发布时间】：2023-03-22 06:15:01
【问题描述】：

我正在实现一个自定义文本字段，并且我希望在用户输入时将某些关键字（即主题标签）设置为不同于其余文本的样式。

有点像这样：

有没有办法在 Flutter 中做到这一点？

【问题讨论】：

冠军可能是您可以使用三元条件语句来更改该特定变量的颜色。

标签： flutter

【解决方案1】：

这个问题和How to change color of particular text in a text field dynamically?很像

我在那里回答：https://stackoverflow.com/a/57846261/5280562

简而言之：您可以扩展 EditableText 小部件，包括其 EditableTextState 类并覆盖 buildTextSpan 方法。

下面是我在我的应用程序中使用的名为AnnotatedEditableText 的工作示例。您需要提供一个 Annotation 对象列表，这些对象描述了需要突出显示的文本范围以及要使用的样式。

import 'package:flutter/widgets.dart';

class Annotation extends Comparable<Annotation> {
  Annotation({@required this.range, this.style});
  final TextRange range;
  final TextStyle style;

  @override
  int compareTo(Annotation other) {
    return range.start.compareTo(other.range.start);
  }

  @override
  String toString() {
    return 'Annotation(range:$range, style:$style)';
  }
}

class AnnotatedEditableText extends EditableText {
  AnnotatedEditableText({
    Key key,
    FocusNode focusNode,
    TextEditingController controller,
    TextStyle style,
    ValueChanged<String> onChanged,
    ValueChanged<String> onSubmitted,
    Color cursorColor,
    Color selectionColor,
    TextSelectionControls selectionControls,
    this.annotations,
  }) : super(
          key: key,
          focusNode: focusNode,
          controller: controller,
          cursorColor: cursorColor,
          style: style,
          keyboardType: TextInputType.text,
          autocorrect: true,
          autofocus: true,
          selectionColor: selectionColor,
          selectionControls: selectionControls,
          onChanged: onChanged,
          onSubmitted: onSubmitted,
        );

  final List<Annotation> annotations;

  @override
  AnnotatedEditableTextState createState() => new AnnotatedEditableTextState();
}

class AnnotatedEditableTextState extends EditableTextState {
  @override
  AnnotatedEditableText get widget => super.widget;

  List<Annotation> getRanges() {
    var source = widget.annotations;
    source.sort();
    var result = new List<Annotation>();
    Annotation prev;
    for (var item in source) {
      if (prev == null) {
        // First item, check if we need one before it.
        if (item.range.start > 0) {
          result.add(new Annotation(
            range: TextRange(start: 0, end: item.range.start),
          ));
        }
        result.add(item);
        prev = item;
        continue;
      } else {
        // Consequent item, check if there is a gap between.
        if (prev.range.end > item.range.start) {
          // Invalid ranges
          throw new StateError(
              'Invalid (intersecting) ranges for annotated field');
        } else if (prev.range.end < item.range.start) {
          result.add(Annotation(
            range: TextRange(start: prev.range.end, end: item.range.start),
          ));
        }
        // Also add current annotation
        result.add(item);
        prev = item;
      }
    }
    // Also check for trailing range
    final String text = textEditingValue.text;
    if (result.last.range.end < text.length) {
      result.add(Annotation(
        range: TextRange(start: result.last.range.end, end: text.length),
      ));
    }
    return result;
  }

  @override
  TextSpan buildTextSpan() {
    final String text = textEditingValue.text;

    if (widget.annotations != null) {
      var items = getRanges();
      var children = <TextSpan>[];
      for (var item in items) {
        children.add(
          TextSpan(style: item.style, text: item.range.textInside(text)),
        );
      }
      return new TextSpan(style: widget.style, children: children);
    }

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

它也可以在这个 Gist 中找到：https://gist.github.com/pulyaevskiy/d7af7217c2e71f31dfb78699f91dfbb5

【讨论】：

【解决方案2】：

TextField 不提供该功能。

https://pub.dartlang.org/packages/zefyr 可以做到这一点。

【讨论】：

【解决方案3】：

我认为还有一些更“硬”的方法可以做到这一点

第一个：

制作一个行小部件，添加字符串的一部分直到要突出显示的单词，添加特殊单词，设置样式并添加字符串的其余部分。

或者，你可以试试RichText

Günter 发布了有关 zefyr 软件包的信息，我还没有使用它，但如果适合你，我会很高兴帮助您

【讨论】：

【解决方案4】：

我实际上遇到了同样的问题，发现 AnnotatedEditbleText 对我帮助很大。

我发布了有用的包来解决这类问题。

https://pub.dev/packages/hashtagable

【讨论】：