Comment ajouter un ListView à une colonne dans Flutter ?

Question

J'essaie de construire une page de connexion simple pour mon application Flutter. J'ai réussi à construire les TextFields et les boutons de connexion/signature. Je veux ajouter un ListView horizontal. Lorsque j'exécute le code, mes éléments disparaissent. Si je le fais sans le ListView, tout va bien à nouveau. Comment puis-je le faire correctement ?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

Answer 1

J'ai aussi ce problème. Ma solution est d'utiliser Expanded widget pour étendre l'espace restant.

Column(
  children: <Widget>[
    Expanded(
      child: horizontalList,
    )
  ],
);

Answer 2

Raison de l'erreur :

Column s'étend jusqu'à la taille maximale dans la direction de l'axe principal (axe vertical), et il en va de même pour le fichier ListView .

Solutions

Ainsi, vous devez contraindre la hauteur de l'élément ListView . Il existe de nombreuses façons de procéder, vous pouvez choisir celle qui convient le mieux à vos besoins.

---

1. Si vous voulez permettre ListView pour occuper tout l'espace restant à l'intérieur Column utiliser Expanded .

   Column(
     children: <Widget>[
       Expanded(
         child: ListView(...),
       )
     ],
   )

---

2. Si vous voulez limiter votre ListView à certains height vous pouvez utiliser SizedBox .

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )

---

3. Si votre ListView est faible, vous pouvez essayer shrinkWrap sur elle.

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // use it
       )
     ],
   )

Answer 3

Vous pouvez vérifier la sortie de la console. Elle affiche une erreur :

L'assertion suivante a été lancée pendant performResize() : La hauteur de la fenêtre d'affichage horizontale n'était pas illimitée. Les fenêtres d'affichage s'étendent dans l'axe transversal pour remplir leur conteneur et contraignent leurs enfants à correspondre à leur extension dans l'axe transversal. Dans ce cas, une fenêtre horizontale a reçu une quantité illimitée de espace vertical illimité pour s'étendre.

Vous devez ajouter une contrainte de hauteur à votre liste horizontale. Par exemple, envelopper dans un conteneur avec une hauteur :

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

Answer 4

J'ai SingleChildScrollView comme parent, et un Column Widget et ensuite List View Widget comme dernier enfant.

L'ajout de ces propriétés dans la vue en liste a fonctionné pour moi.

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,

Answer 5

Expanded Widget augmente sa taille autant qu'il le peut avec l'espace disponible Puisque ListView a essentiellement une hauteur infinie, cela provoquera une erreur.

 Column(
  children: <Widget>[
    Flexible(
      child: ListView(...),
    )
  ],
)

Ici, nous devrions utiliser le Flexible car il n'occupera que l'espace dont il a besoin, alors que le mode étendu prend le plein écran, même s'il n'y a pas assez de widgets à rendre en plein écran.