webentwicklung-frage-antwort-db.com.de

TextField innerhalb von Row verursacht Layoutausnahme: Größe kann nicht berechnet werden

Ich bekomme eine Rendering-Ausnahme, die ich nicht verstehen kann. Ich versuche, eine Spalte mit drei Zeilen zu erstellen. 

Zeile [Bild]

Zeile [Textfeld]

Reihe [Buttons]

Hier ist mein Code zum Erstellen des Containers:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

und mein buildAppEntryRow-Code für den Textcontainer

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

Beim Ausführen erhalte ich die folgende Ausnahme:

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.Dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

Wenn ich buildAppEntryRow stattdessen in ein TextField ändere

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

Ich bekomme keine Ausnahme mehr. Was fehlt mir bei der Row-Implementierung, durch die die Größe dieser Zeile nicht berechnet werden kann?

dartflutter
36
Matthew Smith

(Ich gehe davon aus, dass Sie eine Row verwenden, weil Sie in der Zukunft andere Widgets neben die TextField setzen möchten.)

Das Row-Widget möchte die intrinsische Größe seiner nicht flexiblen Kinder bestimmen, damit es weiß, wie viel Speicherplatz den flexiblen Platz zur Verfügung steht. TextField hat jedoch keine intrinsische Breite; es weiß nur, wie es sich auf die volle Breite des übergeordneten Containers anpassen soll. Versuchen Sie es in eine Flexible oder Expanded zu packen, um der Row mitzuteilen, dass Sie erwarten, dass die TextField den verbleibenden Speicherplatz belegt:

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),
101
Collin Jackson

Sie erhalten diesen Fehler, weil sich TextField in horizontaler Richtung ausdehnt, und auch Row. Daher müssen wir die Breite von TextField einschränken. Es gibt viele Möglichkeiten, dies zu tun.

  1. Benutze Expanded

     Row(
  children: <Widget>[
    Expanded(child: TextField()),
    OtherWidget(),
  ],
)

  2. Benutze Flexible

    Row(
  children: <Widget>[
    Flexible(child: TextField()),
    OtherWidget(),
  ],
)

  3. Wickle es in Container oder SizedBox und gib width an

    Row(
  children: <Widget>[
    SizedBox(width: 100, child: TextField()),
    OtherWidget(),
  ],
)
4
CopsOnRoad

sie sollten Flexible verwenden, um ein Textfeld innerhalb einer Zeile zu verwenden.

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row
3
Ajit Paul

Wie @Asif Shiraz erwähnte, hatte ich dasselbe Problem und löste dieses Problem, indem ich die Spalte in einem flexiblen Fall einwickelte, hier wie folgt:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}
1
Shahzad Akram

Eine einfache Lösung ist, Ihre Text() in eine Container()..__ zu packen.

Container(
      child: TextField()
)

Hier erhalten Sie auch das Attribut width und height eines Containers, um das Erscheinungsbild Ihres Textfelds anzupassen. Sie müssen Flexible nicht verwenden, wenn Sie Ihr Textfeld in einen Container einbetten.

0
vs_lala

Die Lösung besteht darin, Ihr Text() in eines der folgenden Widgets zu packen: Entweder Expanded oder Flexible . Ihr Code mit Expanded sieht also so aus:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),
0
AAEM