TextInput в TextFormField Get Bottom Padded Если используется suffixIcon или prefixIcon, свойство InputDecoration - PullRequest
0 голосов
/ 01 февраля 2020

Верхнее изображение: Обычный красивый TextFormField без предоставления Widget для suffixIcon

Нижнее изображение: Suppyling Icon Widget для suffixIcon делает ввод текста бесполезно

Есть идеи, что вызывает это?

Код: Это обычный TextFormField с suffixIcon

   TextFormField(
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.search),
      )
    )

enter image description here

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Текущее решение:

TextFormField(
   textAlignVertical: TextAlignVertical.bottom,
   decoration: InputDecoration(
      prefixIcon: Padding(
         padding: const EdgeInsets.only(top: 12.0, right: 12.0),
         child: Icon(Icons.search)
      ),
   ),
)

Документация:

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 12.0),
  child: myIcon, // myIcon is a 48px-wide widget.
)

Поскольку, очевидно, согласно документации, prefixIcon и suffixIcon заключены в Padding Widget со значением 12. Поэтому, чтобы вернуть его в исходное положение, мы можем просто обернуть его в противоположном направлении Padding, в данном случае top и right, потому что я ' м, используя prefixIcon. Если вы используете суффикс Icon, заключите его в top и left. И последнее, чтобы ввод текста не плавал (добавлялся снизу), я добавляю это textAlignVertical: TextAlignVertical.bottom

1 голос
/ 01 февраля 2020

Возможно, это не лучший подход, но он работает. Вы можете обернуть TextFormField Container. Это может сделать текст и значок в одной строке.

  Padding(
       padding: EdgeInsets.all(15),
          child: Container(
              height: 25,
              child: TextFormField(
                  decoration: InputDecoration(
                suffixIcon: Icon(Icons.search),
              ))))

Вывод

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...