Багаторядкове текстове поле у ​​флаттері

Це може звучати просто, але як ми можемо багаторядно редагувати текстове поле у ​​флаттері? TextField працює лише з одним рядком.

Редагувати: деякі точні, оскільки здається, що це не зрозуміло. Хоча ви можете встановити багаторядковий режим для віртуального обтікання текстового вмісту, він все одно не багаторядковий. Це один рядок, що відображається на кілька рядків. Якщо ви хочете зробити щось подібне, то не можете. Тому що у вас немає доступу до ENTERкнопки. І відсутність кнопки введення означає відсутність багаторядкової.

Щоб використовувати автоматичне перенесення, просто встановіть maxLinesяк null:

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

Якщо maxLinesвластивість є null, кількість ліній не обмежена, і обтікання ввімкнено.

Якщо ви хочете, щоб ваш TextField адаптувався до вводу користувача, зробіть це:

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

тут встановіть максимум рядків, що завгодно, і ви готові піти. На мою думку, встановлення максимальних рядків на нуль - невдалий вибір, ми повинні встановити для нього якесь значення.

Хоча інші люди вже згадували про те, що можна використовувати тип клавіатури "TextInputType.multiline", я хотів додати свою реалізацію TextField, яка автоматично адаптує свою висоту при введенні нового рядка, оскільки часто хочеться наслідувати поведінку введення WhatsApp та подібні програми.

Для цього я аналізую кількість символів "\ n" у вхідних даних при кожному зміні тексту. Це, здається, надмірне, але, на жаль, поки що я не знайшов кращої можливості досягти цього біхувуру у Flutter, і я не помітив жодних проблем із продуктивністю навіть на старих смартфонах.

class _MyScreenState extends State<MyScreen> {
  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,
  )

TextFieldмає властивість maxLines .

використовуй це

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

Використовуйте, expandsі вам не потрібно вводити minLinesабо maxLinesбудь-яке конкретне значення:

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

Вкажіть TextInputAction.newline, щоб TextField відповів на клавішу Enter і прийняв багаторядковий ввід :

textInputAction: TextInputAction.newline,

Офіційний документ стверджує : maxLinesвластивість можна встановити як нуль, щоб зняти обмеження кількості рядків. За замовчуванням це одне, тобто це однорядкове текстове поле.

ПРИМІТКА: maxLines не повинно бути нулем.

якщо вище раз не працював для вас , то спробуйте адд minLines також

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        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)),
          ),
      ),
),