Как добавить статическую единицу (текст) в поле текстовой формы в Flutter?

#flutter #dart #textfield

#flutter #dart #текстовое поле

Вопрос:

В настоящее время у меня есть это TextFormField с помощью hintText:

цель состоит в том, чтобы добавить единицы внутри TextFormField, независимо от того, вводит пользователь или нет. Это должно выглядеть примерно так:

Как этого добиться? Кроме того, как центрировать значение?

Вот мой текущий код для TextFormField:

 TextFormField(
  decoration: InputDecoration(
    hintText: '0.0',
    contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
    filled: true,
    fillColor: Colors.white24,
    floatingLabelBehavior: FloatingLabelBehavior.never,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide.none,
    ),
    counterText: '',
  ),
),

Ответ №1:

TextFormField Оформление может быть suffixText свойством

      TextFormField(
       controller: c,
       // align to center
       textAlign: TextAlign.center,
       decoration:  InputDecoration(
         hintText: '0.0',
         // show kg
         suffixText: 'Kg',
     )

Текст можно центрировать с помощью textAlign свойства

1. Спасибо, это сработало, за исключением того, что оно отображается только при наборе текста, есть ли способ постоянно отображать суффикс?

2. На данный момент существует открытая проблема. github.com/flutter/flutter/issues/64552

Ответ №2:

Один из способов — использовать TextFormField и текст внутри строки, которая находится внутри контейнера, может помочь что-то вроде этого

 Container(
          child: Row(
            children: [TextFormField(), Text('Kg')],
          ),
        ),

другой способ заключается в том, что вы можете использовать

 TextFormField(
                decoration: InputDecoration(suffixText: 'Kg'),
              ),

но здесь проблема в том, что вы получите текст с суффиксом только тогда, когда поле TextFormField включено, один из способов, который вы можете попробовать, чтобы сделать его всегда видимым, — это использовать autovalidate свойство типа

 TextFormField(
                autovalidateMode: AutovalidateMode.always,
                decoration: InputDecoration(suffixText: 'Kg'),
              ),

Я не тестировал этот autovalidateMode, но он должен работать правильно.

1. Спасибо, но AutovalidateMode не фокусируется, поэтому суффикс остается скрытым, хотя это не проблема :). Проблема с первым предложенным вами методом заключается в том, что текст будет находиться за пределами поля текстовой формы, но я мог бы обернуть строку с помощью BoxDecoration, спасибо за подсказку: D

2. да, вы можете использовать свойство decoration контейнера (), чтобы вместо этого добавить BoxDecoration, при этом вы также можете полностью изменить размер контейнера, в любом случае, ваше приветствие, пожалуйста, отметьте ответ как принятый, если он вам помог 😊