Fultter: Как изменить цвет всего текста перед определенным символом в TextField? - PullRequest
Новая
       39

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

0 голосов
/ 22 февраля 2020

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

USER-0123456789

В котором текст USER (Весь текст перед символом ' - ') должен быть красного цвета, а другой - черного цвета.

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

1 Ответ

1 голос
/ 01 марта 2020

Я могу решить Вопрос с помощью оператора 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(),
),
...