Campo di testo multilinea in movimento

Può sembrare facile, ma come possiamo creare un campo di testo modificabile su più righe in flutter? TextField funziona solo con una singola riga.

Modifica: alcune precisioni perché sembra che non sia chiaro. Sebbene sia possibile impostare la multilinea per avvolgere virtualmente il contenuto del testo, non è ancora multilinea. È una singola riga visualizzata in più righe. Se vuoi fare qualcosa del genere, non puoi. Perché non hai accesso a ENTERbutton. E nessun pulsante Invio significa nessuna multilinea.

Per utilizzare la funzione di avvolgimento automatico, imposta maxLinescome null:

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

Se la maxLinesproprietà è null, non c'è limite al numero di righe e il ritorno a capo è abilitato.

Se vuoi che il tuo TextField si adatti all'input dell'utente, fallo:

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

qui imposta le linee massime su quello che vuoi e sei a posto. A mio parere, impostare le maxlines su null non è una buona scelta, dovremmo impostarlo su un valore.

Sebbene altre persone abbiano già menzionato che è possibile utilizzare il tipo di tastiera "TextInputType.multiline", ho voluto aggiungere la mia implementazione di un TextField che adatta automaticamente la sua altezza quando viene inserita una nuova riga, poiché spesso si desidera imitare il comportamento di input di WhatsApp e app simili.

Sto analizzando il numero di caratteri "\ n" nell'input per questo scopo ogni volta che il testo viene modificato. Questo sembra essere eccessivo, ma sfortunatamente non ho trovato una possibilità migliore per raggiungere questo beahivour in Flutter finora e non ho notato problemi di prestazioni anche su smartphone più vecchi.

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,
  )

Usa questo

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

TextFieldha la proprietà maxLines .

Usa expandse non hai bisogno di dare minLineso maxLinesalcun valore specifico:

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

Specificare TextInputAction.newline per fare in modo che un TextField risponda al tasto Invio e accetti l' input su più righe :

textInputAction: TextInputAction.newline,

Il documento ufficiale dichiara : la maxLinesproprietà può essere impostata su null per rimuovere la restrizione sul numero di righe. Per impostazione predefinita , è uno, il che significa che questo è un campo di testo a riga singola.

NOTA: maxLines non deve essere zero.

se sopra una volta non ha funzionato per te, prova ad aggiungere anche minLines

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

Per il widget TextFormField , è possibile impostare minLines e maxLines se si desidera impostare un numero fisso di righe. Altrimenti puoi anche impostare maxLines su null.

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