So erweitern Sie ein Textfeld in Flutter sieht aus wie ein Textbereich

Wenn ich im Querformat auf TextField tippe, möchte ich im Vollbildmodus erweitern, wie WhatsApp

Beispiel gif Whats

            TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "Input your opinion",
                  hintStyle: TextStyle(color: Colors.white30),
                  border: OutlineInputBorder(
                      borderRadius:
                      BorderRadius.all(new Radius.circular(25.0))),
                  labelStyle: TextStyle(color: Colors.white)),
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25.0,
              ),
              controller: host,
              validator: (value) {
                if (value.isEmpty) {
                  return "Empty value";
                }
              },
            )

Alles, was Sie tun müssen, ist die Einstellung maxLines Variable beim Erstellen einer TextField. Ich habe das Textfeld in einem Karten-Widget hinzugefügt, damit Sie die Gesamtfläche sehen können.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Material App"),
      ),
      body: Column(
        children: <Widget>[
          Card(
            color: Colors.grey,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: TextField(
                maxLines: 8, //or null 
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

Satz maximale Anzahl an Zeilen zu Null und Tastaturtyp zu TextInputType.mehrzeilig so was:

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

Um das genaue Aussehen des Textbereichs zu erreichen, können Sie dies verwenden

TextFormField(
   minLines: 6, // any number you need (It works as the rows for the textarea)
   keyboardType: TextInputType.multiline,
   maxLines: null,
)

Hier ist die Ausgabe (Einige zusätzliche Stile werden benötigt)

Genießen….

Leider gibt es in Flutter keine Möglichkeit, die Mindesthöhe eines TextField oder TextFormField festzulegen. Die beste Möglichkeit, einem TextField oder einem TextFormField eine feste Größe zuzuweisen, besteht darin, die maximalen Zeilen anzugeben, die das Feld einnehmen soll, ohne sich weiter zu erweitern. Hinweis: Dies begrenzt nicht die Menge des Eingabetextes, sondern nur die Anzahl der angezeigten Zeilen.

Beispiel:

                             TextFormField(
                                keyboardType: TextInputType.multiline,
                                maxLines: 8,
                                maxLength: 1000,

                              ),

Dadurch wird die Größe des Felds auf 8 Zeilen begrenzt, es kann jedoch bis zu 1000 Zeichen umfassen. Hoffe, das wird jemandem helfen.

Satz expands: true

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

ODER

Wenn Sie es in einem verwenden Columndann benutze:

Expanded(
  child: TextField(
    maxLines: null,
    expands: true,
  ),
)

Setzen Sie maxLines auf null und setzen Sie keyboardType auf TextInputType.multiline lässt die Höhe von TextField mit Ihrer Eingabe wachsen.

Und hintText mit ‘\n’ kann die Höhe des TextFields am Anfang erweitern.

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
  decoration: InputDecoration(
      labelText: '内容',
      hintText: '描述下发生的事情吧！\n\n\n\n\n'),

),

Hier ist die Ausgabe.

Mit Fokus.

Ohne Fokus.

Wenn Ihr textField-Widget das untergeordnete Widget und die Gruppe von Column ist expands: true .

Kann einstellen textAlignVertical: TextAlignVertical.top Text oben auszurichten.