Фулттер: Как изменить цвет всего текста перед определенным символом в TextField?

Я пытаюсь создать виджет TextField в приложении Flutter, в котором я хочу разрешить пользователю вставлять текстовую строку следующим образом:

USER-0123456789

В котором текст ПОЛЬЗОВАТЕЛЬ (весь текст перед символом '-') должен быть красного цвета, а остальные - черным.

Проблема в том, что я не знаю, как это сделать. После некоторого исследования я обнаружил, что могу сделать это с помощью обычного текстового виджета, используя виджет RichText. Но я не знаю подобного виджета для TextField Widget. Пожалуйста, помогите мне выйти из этой ситуации.


person Ankush    schedule 22.02.2020    source источник
comment
stackoverflow.com/a/59773962/2252830   -  person pskink    schedule 22.02.2020
comment
Решение в этой ссылке - раскрасить определенные ключевые слова. Но у меня нет конкретных ключевых слов, таких как слово Apple. Текст ПОЛЬЗОВАТЕЛЬ может быть любым и любой длины. Будет очень полезно, если вы подскажете, как это сделать в моем случае.   -  person Ankush    schedule 22.02.2020
comment
используйте метод String.indexOf(), чтобы найти индекс символа '-' и вернуть действительный TextSpan   -  person pskink    schedule 23.02.2020
comment
Извините за очень поздний ответ, но правительство отключило Интернет на неделю в моем районе.   -  person Ankush    schedule 29.02.2020
comment
Теперь переходим к вопросу: у меня нет большого опыта работы с регулярными выражениями и флаттером. Я новичок в Flutter.   -  person Ankush    schedule 29.02.2020
comment
Я попытался реализовать логику и получил решение использовать два текстовых поля вместо одного. Так как хочу много доработок. Это действительно хорошо работает, но не похоже на то, чего я действительно хочу достичь. Вы можете привести пример того же?   -  person Ankush    schedule 29.02.2020
comment
В примере, которым вы поделились ранее, используется метод splitMapJoin, в котором мы передаем шаблон. Я не понимаю, как создать этот шаблон для моего случая?   -  person Ankush    schedule 29.02.2020
comment
вам не нужны ни splitMapJoin, ни RegExp - все, что вам нужно, это String.indexOf('-') внутри buildTextSpan метода   -  person pskink    schedule 29.02.2020
comment
в основном, если ваш текст содержит '-', вы возвращаете TextSpan с двумя children:, а если нет, вы возвращаете TextSpan только с text:   -  person pskink    schedule 01.03.2020
comment
Ohkkk Теперь я понял. Дай мне попробовать ...   -  person Ankush    schedule 01.03.2020
comment
хорошо, тогда опубликуйте ответ   -  person pskink    schedule 01.03.2020


Ответы (1)


Я могу решить вопрос, используя оператор if для создания двух TextSpan, как это предлагает pskink.

Класс MyTextController:

class MyTextController extends TextEditingController {
  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<InlineSpan> children = [];
    if(text.contains('-')){
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text.substring(0, text.indexOf('-'))));
      children.add(TextSpan(text: text.substring(text.indexOf('-'))));
    } else {
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text));
    }
    return TextSpan(style: style, children: children);
  }
}

Использование в TextFormField:

TextFormField(
    keyboardType: TextInputType.text,
    controller: MyTextController(),
),

Обновление, касающееся ошибки смещения курсора: Я не могу найти решение для этой ошибки. Если найду в ближайшее время, обновлю здесь. Я просто спрятал сам курсор, чтобы его нельзя было заметить.

person Ankush    schedule 01.03.2020
comment
Привет @pskink! Все это работает отлично, но есть некоторые проблемы с отображением нескольких текстовых интервалов. Весь текст сдвигается вниз на определенные пиксели при добавлении нескольких TextSpans в TextField. Кажется, хорошо, и текст находится в центре TextField, пока я не войду - в TextField. когда я это делаю, он показывает два текстовых окна, которые не в центре. они переместились в обратную сторону. Я не знаю, почему это происходит? - person Ankush; 03.03.2020
comment
а также курсор кажется неуместным. это видно при запуске. - person Ankush; 03.03.2020
comment
Я не понимаю, что ты имеешь в виду - person pskink; 03.03.2020
comment
Вся эта ошибка возникает только тогда, когда добавляются два TextSpans вместо одного в TextField. - person Ankush; 03.03.2020
comment
Решил это с помощью TextAlignVertical - person Ankush; 03.03.2020
comment
@Ankush Вы решили проблему с курсором? - person Mohamed Gaber; 14.12.2020
comment
Извини, чувак, я не нашел решения проблемы с курсором. Я просто скрываю это, поскольку это не нужно в моем конкретном случае использования. - person Ankush; 17.12.2020