Автоматически прокручивать многострочный TextFormField, когда он расширяет атрибут maxLines.

Я реализую TextFormField с атрибутом maxLines, установленным на 3. Как я могу заставить TextFormField прокручиваться вниз, когда пользователь начинает со своей четвертой строки? На данный момент курсор просто больше не виден, пока пользователь не прокрутит вниз вручную. Есть ли способ сделать это автоматически?

Это поведение на самом деле показано в приложении flutter_gallery в примере «Текстовые поля». Просто введите длинный текст в поле ввода «Прямая история», пока он не достигнет четвертой строки.
Важные части моего кода на самом деле выглядят так:

import 'package:flutter/material.dart';

class TextFormFieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Form(
        child: new TextFormField(
          maxLines: 3,
        ),
      ),
    );
  }
}

Пока я не нашел решения этой проблемы.
Эта проблема затрагивает как iOS, так и Android.


flutter textfield autoscroll
person Rainer Wittmann    schedule 11.04.2017    source источник
comment
PS: это также влияет на однострочные текстовые поля. Можно было бы ожидать, что текст будет прокручиваться влево, как только будет достигнут конец строки, но это не так.   -  person Rainer Wittmann    schedule 11.04.2017

Ответы (6)


arrow_upward
4
arrow_downward

Кажется, это отсутствующая функция во Flutter Framework, я отправил сообщение об ошибке, чтобы решить ее: https://github.com/flutter/flutter/issues/9365

person Eric Seidel    schedule 13.04.2017

arrow_upward
15
arrow_downward

Наша команда добилась этого, вложив некоторые существующие виджеты:

// create the illusion of a beautifully scrolling text box
return new Container(
    color: Colors.gray,
  padding: new EdgeInsets.all(7.0),

  child: new ConstrainedBox(
    constraints: new BoxConstraints(
      minWidth: _contextWidth(),
      maxWidth: _contextWidth(),
      minHeight: AppMeasurements.isLandscapePhone(context) ? 25.0 : 25.0,
      maxHeight: 55.0,
    ),

    child: new SingleChildScrollView(
      scrollDirection: Axis.vertical,
      reverse: true,

        // here's the actual text box
        child: new TextField(
          keyboardType: TextInputType.multiline,
          maxLines: null, //grow automatically
          focusNode: mrFocus,
          controller: _textController,
          onSubmitted: currentIsComposing ? _handleSubmitted : null,
          decoration: new InputDecoration.collapsed(
            hintText: ''Please enter a lot of text',
          ),
        ),
        // ends the actual text box

      ),
    ),
  );
}

Мы получили помощь от Darky, чтобы получить порядок виджетов и правильные виджеты, чтобы заставить его работать.

person Deborah    schedule 09.02.2018
comment
maxLInes=null — это круто - person Vidor Vistrom; 13.08.2018
comment
красивый лайфхак №3 - person OMi Shah; 15.12.2019
comment
Кто-нибудь запустил это для CupertinoTextBox? Хотя MaxLines=null также должен создавать растущее поле, полоса прокрутки не отображается. - person w461; 31.08.2020

arrow_upward
3
arrow_downward

Вы можете использовать BoxConstraints и установить maxHeight вашего TextField

Container(
  constraints: BoxConstraints(maxHeight: 100),
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null,
    ),
  ),
);
person Abdurahman Popal    schedule 19.08.2020

arrow_upward
3
arrow_downward

С последним флаттером 1.20.4 это текстовое поле будет прокручиваться, когда оно достигнет максимальной высоты.

       Container(
          constraints: BoxConstraints(maxHeight: 200),
             child: TextField(
                maxLines: null,
                 .......
                )
            )

Если вы используете текстовое поле внутри Raw или столбца, оберните его в виджет Expanded

person Sinshaw Demisse    schedule 16.09.2020

arrow_upward
1
arrow_downward

Я заставил это работать так. Надеюсь, поможет!

return new Card(
                shape: RoundedRectangleBorder(
                 side: BorderSide(
                   color: Colors.deepPurpleAccent,
                   width: 1
                 ),
                  borderRadius: BorderRadius.circular(3)
                ),
                child: Container(
                  height: 50,
                  child: SingleChildScrollView(
                    child: TextField(
                      maxLines: null,
                    ),
                  ),
                ),
              );
person user187293    schedule 14.03.2020

arrow_upward
1
arrow_downward

Просто используйте виджет TextFormField() и установите minLines= и maxLines= . Не хватает здесь индикатора прокрутки.

 TextFormField(
                    minLines: 3,
                    maxLines: 3,
                    key: _messageValueKey,
                    decoration: _inputDecoration,
                  ),
person Yeasin Sheikh    schedule 08.05.2021