Как расширить текстовое поле в flutter выглядит как текстовая область

ProgramBox

Как расширить текстовое поле в flutter выглядит как текстовая область

Post author:admin
Запись опубликована:26 мая, 2023
Post category:Вопросы по программированию

#android #dart #flutter #textfield

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

Вопрос:

Когда я нажимаю на текстовое поле в альбомном режиме, я хотел бы развернуть его на весь экран, нравится WhatsApp

             TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "Input your opinion",
                  hintStyle: TextStyle(color: Colors.white30),
                  border: OutlineInputBorder(
                      borderRadius:
                      BorderRadius.all(new Radius.circular(25.0))),
                  labelStyle: TextStyle(color: Colors.white)),
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25.0,
              ),
              controller: host,
              validator: (value) {
                if (value.isEmpty) {
                  return "Empty value";
                }
              },
            )

Ответ №1:

Все, что вам нужно сделать, это установить maxLines переменную при создании TextField . Я добавил текстовое поле внутри виджета Card, чтобы вы могли видеть общую площадь.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Material App"),
      ),
      body: Column(
        children: <Widget>[
          Card(
            color: Colors.grey,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: TextField(
                maxLines: 8, //or null 
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

Ответ №2:

Установите для maxLines значение null и keyboardType в TextInputType.multiline вот так:

 TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
)

1. Отличное решение! Как мы можем добиться капитализации предложения, все еще используя многострочность?

2. Для будущих искателей: установите textCapitalization: TextCapitalization.sentences в текстовом поле

Ответ №3:

Для достижения точного вида текстовой области вы можете использовать это

 TextFormField(
   minLines: 6, // any number you need (It works as the rows for the textarea)
   keyboardType: TextInputType.multiline,
   maxLines: null,
)

Вот результат (потребуется некоторое дополнительное оформление)

Наслаждайтесь….

Ответ №4:

К сожалению, во flutter вы не можете установить минимальную высоту текстового поля или TextFormField. Лучший способ придать текстовому полю или TextFormField фиксированный размер — это указать максимальное количество строк, которое должно занимать поле, не расширяясь дальше. Примечание: Это не ограничивает объем вводимого текста, это ограничивает только количество отображаемых строк.

Пример:

                              TextFormField(
                                keyboardType: TextInputType.multiline,
                                maxLines: 8,
                                maxLength: 1000,

                              ),

Это ограничит размер поля 8 строками, но может занимать до 1000 символов.
Надеюсь, это кому-нибудь поможет.

1. Я думаю, это не совсем правильно. hintText с ‘ n’ увеличит высоту текстового поля. Смотрите мой ответ ниже.

2. @JChen___ Что вы имеете в виду, это неправильно, вы имеете в виду, что добавление большого количества переводов строк (n) в текст подсказки — лучшее решение. Разве вы не знаете, что как только вы начинаете вводить текст подсказки, текст исчезает?

3. Да, оно исчезает, но расширенная высота сохраняется.

Ответ №5:

Скриншот:

Установите minLines ненулевое значение и maxLines значение null (явно). Установите TextCapitalization.sentences , если вы хотите, чтобы следующий символ был заглавным после точки.

 TextField(
  minLines: 3,
  maxLines: null,
  keyboardType: TextInputType.multiline,
  textCapitalization: TextCapitalization.sentences,
  decoration: InputDecoration(filled: true),
)

Ответ №6:

Установите maxLines равным null и keyboardType равным TextInputType.multiline увеличит высоту текстового поля с вашим вводом.

И hintText с ‘n’ может увеличить высоту текстового поля в начале.

 TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
  decoration: InputDecoration(
      labelText: '内容',
      hintText: '描述下发生的事情吧！nnnnn'),

),

Вот результат.

С фокусом.

Без фокуса.

Ответ №7:

 TextFormField(
          minLines: 6,
          maxLines: null,
          keyboardType: TextInputType.multiline,
          decoration: InputDecoration(
          alignLabelWithHint: true,
          border: OutlineInputBorder(),
          labelText: 'Enter text',
        ),
      ),

Ответ №8:

Если ваш виджет текстового поля является дочерним виджетом столбца и установлен expands: true .

Можно настроить textAlignVertical: TextAlignVertical.top выравнивание текста по верху.

Ответ №9:

Это лучшее решение для текстовой области, если у вас в пользовательском интерфейсе несколько текстовых полей, тогда вам нужно указать в них максимальные строки. Используйте этот код для создания общего компонента, и он будет расходоваться в соответствии с содержимым

 TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
)