Mehrzeiliges Textfeld im Flattern

102

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.

Rémi Rousselet
quelle

Antworten:

172

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.

Fellipe Sanches
quelle
Der Haken ist zu haben maxLines: null. Ohne Hallo scheint es nicht zu funktionieren
Sisir
18

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.

taranjeet singh
quelle
12

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,
  )
Jeff S.
quelle
1
Fügen Sie hinzu, wie Sie _inputHeight tatsächlich verwenden, um die Höhe der Eingabe
festzulegen
5

TextFieldhat die Eigenschaft maxLines .

Geben Sie hier die Bildbeschreibung ein

Deutsche Saprykin
quelle
1
Ich weiß das. Während der Inhalt umbrochen wird, können Sie immer noch nicht die Eingabetaste drücken, um manuell eine neue Zeile zu erstellen. Zumindest auf Android, weil Sie keinen Zugriff auf die Eingabetaste haben.
Rémi Rousselet
Ah, ich habe dieses Problem verpasst. Ich habe ein ähnliches Problem aus dem Jahr 2016 gesehen und daher angenommen, dass es gelöst wurde. Sehr traurig, dass wir es immer noch nicht können.
Rémi Rousselet
2
Es sieht so aus, als ob dies jetzt behoben ist ( github.com/flutter/flutter/issues/8028 ). Ich habe versucht, mehrzeilig auf iOS und Android zu arbeiten, und beide können jetzt neue Zeilen im Textfeld erstellen.
Matt S.
Es kann jetzt tatsächlich eine neue Zeile erstellen, muss jedoch die Eingabetaste zweimal drücken!
Wendu
5

benutze das

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)
Muhannad Mahamooad
quelle
1

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

textInputAction: TextInputAction.newline,
AWhitford
quelle
1

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

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

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.

mickyliu
quelle
0

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

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);
Sai Gopi ich
quelle