Mehrzeiliges Textfeld im Flattern

Es mag einfach klingen, aber wie können wir ein mehrzeiliges bearbeitbares Textfeld im Flattern erstellen? TextField funktioniert nur mit einer einzelnen Zeile.

Bearbeiten: einige Präzisionen, weil es scheint, dass es nicht klar ist. Sie können festlegen, dass der Textinhalt mehrzeilig umbrochen wird, er ist jedoch immer noch nicht mehrzeilig. Es ist eine einzelne Zeile, die in mehreren Zeilen angezeigt wird. Wenn Sie so etwas tun möchten, können Sie es nicht. Weil Sie keinen Zugriff auf die ENTERSchaltfläche haben. Und keine Eingabetaste bedeutet keine mehrzeilige.

Um auto wrap zu bedienen, einfach eingestellt maxLinesals null:

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

Wenn die maxLinesEigenschaft ist null, gibt es keine Begrenzung für die Anzahl der Zeilen, und der Umbruch ist aktiviert.

Wenn Sie möchten, dass sich Ihr TextInputField an die Benutzereingaben anpasst, gehen Sie folgendermaßen vor:

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

Stellen Sie hier die maximale Anzahl der Zeilen auf das ein, was Sie möchten, und Sie können loslegen. Meiner Meinung nach ist es keine gute Wahl, die Maxlines auf Null zu setzen. Wir sollten sie auf einen bestimmten Wert setzen.

Obwohl andere bereits erwähnt haben, dass der Tastaturtyp "TextInputType.multiline" verwendet werden kann, wollte ich meine Implementierung eines TextField hinzufügen, das seine Höhe automatisch anpasst, wenn eine neue Zeile eingegeben wird, da häufig das Eingabeverhalten von nachgeahmt werden soll WhatsApp und ähnliche Apps.

Zu diesem Zweck analysiere ich bei jeder Änderung des Textes die Anzahl der Chat-Zeichen in der Eingabe. Dies scheint ein Overkill zu sein, aber leider habe ich bisher in Flutter keine bessere Möglichkeit gefunden, dieses Buhivour zu erreichen, und ich habe auch bei älteren Smartphones keine Leistungsprobleme festgestellt.

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

TextFieldhat die Eigenschaft maxLines .

benutze das

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

Geben Sie TextInputAction.newline einen machen TextField- reagieren auf die Enter - Taste und akzeptieren Eingang mehrzeiligen :

textInputAction: TextInputAction.newline,

Verwenden Sie expandsund Sie brauchen nicht zu geben minLinesoder maxLineseinen bestimmten Wert:

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

Offizielles Dokument besagt : Die maxLinesEigenschaft kann auf null gesetzt werden, um die Beschränkung der Anzahl der Zeilen aufzuheben. Standardmäßig ist es eins, was bedeutet, dass dies ein einzeiliges Textfeld ist.

HINWEIS: maxLines darf nicht Null sein.

Wenn oben einmal nicht für Sie funktioniert hat, versuchen Sie auch , minLines hinzuzufügen

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