Раскрашиваем только часть текста TextForm - PullRequest
Новая
       30

Раскрашиваем только часть текста TextForm

0 голосов
/ 02 августа 2020

Мне было интересно, есть ли способ настроить TextFormField с большей точностью. Я не хочу менять цвет всего текста, а только его часть. Например, ниже приведен текст TextFormField, упомянутый выше, и я хочу выделить «に は» (ie, что находится между фигурными скобками), добавив красный цвет. Я бы не хотел создавать для этого несколько полей TextFormFields, потому что впоследствии будет сложно собрать текст, но я не знаю, возможно ли это.

Пример поля текстовой формы для настройки

ПРЕДУПРЕЖДЕНИЕ Я не ищу виджет RichText, так как хочу настроить виджет TextFormField или любой виджет с редактируемым текстом. Этот виджет используется в списке, поэтому я не хотел бы использовать виджет предварительного просмотра с моим виджетом ввода.

И

Мне не нужен полный RichTextEditor, так как пользователь не должен иметь возможность изменять цвет. Только части между фигурными скобками должны автоматически раскрашиваться.

Давайте посмотрим, какие решения вы, ребята, могли бы придумать!

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Я наконец нашел суть, которая соответствует моему запросу. Для тех, кто ищет ответ на мой вопрос, вам, кажется, нужно переопределить EditableText ( Как динамически изменить цвет определенного текста в текстовом поле? ). Но это всего лишь черновик и на сегодняшний день работает некорректно. Я постараюсь пойти по этому пути и добавить свой ответ в этот пост.

EDIT:

Единственное, что вам нужно изменить в этом ответе, это следующее: 

  @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. Ошибка возникла при удалении символа, потому что диапазон мог вызвать исключение, когда конец диапазона не совпадал.

0 голосов
/ 02 августа 2020

Возможно, это не совсем то, что вам нужно, но, возможно, это поможет вам начать работу.

Используйте 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(),
    ],
  ),
 );
...