web-dev-qa-db-fra.com

TextField dans Row provoque une exception de mise en page: impossible de calculer la taille

Je reçois une exception de rendu que je ne comprends pas comment résoudre le problème. J'essaie de créer une colonne qui a 3 lignes. 

Rangée [Image]

Row [TextField]

Row [Boutons]

Voici mon code pour construire le conteneur:

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;
  }

et mon code buildAppEntryRow pour le conteneur de texte

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

Quand je cours, j'obtiens l'exception suivante:

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)

Si je change buildAppEntryRow en un TextField plutôt comme ceci

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

Je ne reçois plus l'exception. Qu'est-ce qui me manque avec l'implémentation Row qui l'empêche de calculer la taille de cette ligne?

dartflutter
36
Matthew Smith

(Je suppose que vous utilisez une Row parce que vous souhaitez placer d'autres widgets à côté de la TextField dans le futur.)

Le widget Row souhaite déterminer la taille intrinsèque de ses enfants non flexibles afin de savoir combien d'espace il lui reste pour les enfants flexibles. Cependant, TextField n'a pas de largeur intrinsèque; il sait seulement comment se dimensionner à la largeur totale de son conteneur parent. Essayez de l’emballer dans une Flexible ou une Expanded pour indiquer à la Row que vous vous attendez à ce que la TextField occupe l’espace restant:

      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

Vous obtenez cette erreur parce que TextField s'agrandit horizontalement, de même que Row, nous devons donc contraindre la largeur de TextField. Il existe de nombreuses façons de le faire.

  1. Utilisez Expanded

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

  2. Utilisez Flexible

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

  3. Enveloppez-le dans Container ou SizedBox et fournissez width

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

vous devez utiliser Flexible pour utiliser un champ de texte dans une ligne.

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


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

Comme @Asif Shiraz a mentionné que j'avais le même problème et que j'avais résolu le problème en enveloppant la colonne dans un fichier Flexible,

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

Une solution simple consiste à envelopper votre Text() dans une Container(). Ainsi, votre code sera le suivant:

Container(
      child: TextField()
)

Ici, vous obtenez également les attributs width et height d'un conteneur pour ajuster l'apparence de votre champ de texte. Inutile d'utiliser Flexible si vous placez votre champ de texte dans un conteneur.

0
vs_lala

La solution consiste à envelopper votre Text() dans l'un des widgets suivants: Soit Expanded ou Flexible . Donc, votre code utilisant Expanded sera comme:

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