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

Изменить: некоторые уточнения, потому что кажется, что это не ясно. Хотя вы можете установить многострочность для виртуального обтекания текстового содержимого, это все же не многострочный текст. Это одна строка, отображаемая в несколько строк. Если вы хотите сделать что-то подобное, вы не сможете. Потому что у вас нет доступа к кнопке ENTER. И отсутствие кнопки ввода означает отсутствие многострочного.

Rémi Rousselet

Ответов: 15

Ответы (15)

используйте это

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)

Если вы хотите, чтобы текстовое поле адаптировалось к вводу пользователя, сделайте следующее:

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

здесь установите максимальное количество строк на все, что вы хотите, и все готово. На мой взгляд, установка maxlines на null - не лучший выбор, мы должны установить его на какое-то значение.

Для виджета TextFormField, вы можете установить minLines и maxLines, если хотите установить фиксированное количество строк. В противном случае вы также можете установить для maxLines значение null.

TextFormField(
      minLines: 5,
      maxLines: 7,
      decoration: InputDecoration(
          hintText: 'Address',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
      ),
),

Используйте , расширяет, и вам не нужно указывать minLines или maxLines любое конкретное значение:

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

Хотя этот вопрос довольно старый, нет подробного ответа, который объяснял бы, как динамически изменять размер TextField с небольшими усилиями разработчика. Это особенно важно, когда TextField помещается в гибкий блок, такой как ListView, SingleChildScrollView и т. Д. (Гибкий блок не сможет определить внутренний размер расширяемого TextField).

Как предлагают многие другие пользователи, создайте свое TextField следующим образом:

TextField(
  textInputAction: TextInputAction.newline,
  keyboardType: TextInputType.multiline,
  minLines: null,
  maxLines: null,  // If this is null, there is no limit to the number of lines, and the text container will start with enough vertical space for one line and automatically grow to accommodate additional lines as they are entered.
  expands: true,  // If set to true and wrapped in a parent widget like [Expanded] or [SizedBox], the input will expand to fill the parent.
)

Как справиться с отсутствующей внутренней высотой TextField?

Оберните TextField в IntrinsicHeight class, чтобы предоставить динамически вычисляемую внутреннюю высоту расширяемого TextField его родительскому элементу (когда запрашивается, например, через flexbox).

   TextFormField(
                  minLines: 2,
                  maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    hintText: 'description',
                    hintStyle: TextStyle(
                      color: Colors.grey
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    ),
                  ),
                ),

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

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);

Укажите TextInputAction.newline, чтобы TextField отвечал на клавишу ввода и принимал многострочный ввод:

textInputAction: TextInputAction.newline,

Используйте расширенный виджет для динамических ощущений

Расширенный ( дочерний элемент: TextField ( keyboardType: TextInputType.multiline, minLines: 1, maxLines: 3, ), )

Официальный документ утверждает: Для свойства maxLines можно установить значение null, чтобы снять ограничение на количество строк.По умолчаниюэто одно, то есть это однострочное текстовое поле.

ПРИМЕЧАНИЕ: maxLines не должно быть нулем.

Вы должны использовать эту строку в виджете TextField:

maxLines: null,

если не сработало, просто обратите внимание, что вам нужно удалить это: textInputAction: TextInputAction.next это отключает действие многострочного свойства на клавиатуре ..

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

@override
  Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      double height = MediaQuery.of(context).size.height;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start, 
      children: [
      Container(
        child: ConstrainedBox(
          //  fit: FlexFit.loose,
          constraints:  BoxConstraints(
            maxHeight: height,//when it reach the max it will use scroll
            maxWidth: width,
          ),
          child: const TextField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            minLines: 1,
            decoration: InputDecoration(
              fillColor: Colors.blueAccent,
              filled: true,
              hintText: "Type  ",
              border: InputBorder.none,
            ),
          ),
        ),
      )
    ]);
  }

enter image description here

Хотя другие люди уже упоминали, что можно использовать тип клавиатуры «TextInputType.multiline», я хотел добавить свою реализацию TextField, которая автоматически адаптирует свою высоту при вводе новой строки, поскольку часто требуется имитировать поведение ввода WhatsApp и подобных приложений.

Я анализирую количество '\ n' во входных данных для этой цели каждый раз, когда текст изменяется. Это кажется излишним, но, к сожалению, я пока не нашел лучшей возможности добиться этого во Flutter, и я не заметил никаких проблем с производительностью даже на старых смартфонах.

class _MyScreenState extends State {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )

Чтобы использовать автоматический перенос, просто установите maxLines как null:

Текстовое поле (
  keyboardType: TextInputType.multiline,
  maxLines: нуль,
)

Если свойство maxLines имеет значение null, количество строк не ограничено и перенос включен.

TextField имеет свойство maxLines.

enter image description here

2022 WebDevInsider