Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка в текстовом поле формы трепещет при вводе текста

Горизонтальная прокрутка в текстовом поле формы трепещет при вводе текста

#flutter #dart

Вопрос:

У меня есть текстовое поле ввода электронной почты, когда я пишу больше текста, чем ширина этого ввода, остальная часть текста не видна. Есть ли способ сделать горизонтальную прокрутку при вводе в это поле текстовой формы?

На следующем рисунке описано поведение, которое я хочу.

Горизонтальная прокрутка в поле текстовой формы

Изменить: Мой Код

 Container(
  width: 270,
  height: 42,
  child: new TextFormField(
    validator: (val) => val.isEmpty ? 'Enter an email' : null,
    decoration: new InputDecoration(
      icon: Icon(
        Icons.email_outlined,
      ),
      labelText: 'Email',
      border: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide: new BorderSide(),
      ),
    ),
    keyboardType: TextInputType.emailAddress,
    onChanged: (val) {
      setState(() => email = val);
    },
  ),
),

Вот что происходит, когда я печатаю за пределами ширины поля текстовой формы
Вот что происходит, когда я печатаю за пределами ширины поля текстовой формы

Комментарии:

1. Какой тип вывода вы получаете? Потому что то, чего вы хотите добиться, — это поведение по умолчанию TextFormField() , и если вы хотите увидеть скрытый контент, вы можете прокрутить вправо, чтобы просмотреть ранее введенный контент.

2. Поэтому, когда я начинаю печатать за пределами ширины, текст больше не виден.

3. Можете ли вы как-то это показать ?

4. Конечно, я добавлю несколько изображений

5. Удалите свой атрибут высоты из вашего Container() , это вызывает проблему

Ответ №1:

Есть два способа сделать это:

  1. Вы можете добавить свойство isDense в поле Textform, и в этом случае ваш код будет выглядеть следующим образом:
 Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: new InputDecoration(
            isDense: true,
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

Это до некоторой степени устраняет проблему, однако, если шрифт, который расширяется ниже(например, запятые, точки с запятой и т. Д., Все еще обрезается). Следующий метод исправляет это:

  1. Используйте свойство contentPadding, так как при проверке исходного кода все, что делает isDense, — это изменяет значение свойства contentPadding. Это часть фактического кода, лежащего в основе isDense:
 if (decoration!.filled == true) { // filled == null same as filled == false
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0)
          : const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 12.0));
      } else {
        // Not left or right padding for underline borders that aren't filled
        // is a small concession to backwards compatibility. This eliminates
        // the most noticeable layout change introduced by #13734.
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0)
          : const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 12.0));
      }

Как вы можете видеть, все, что делает Flutter за кулисами, — это присваивает вашим аргументам жестко закодированные значения на основе переданных вами параметров. В вашем случае лучшей конфигурацией, по-видимому, является:

 Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0),
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

Приведенный выше код устраняет вашу проблему, но может создать дополнительные проблемы, если высота шрифта изменится.

Метки: