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

Comme cela a été mentionné par d'autres personnes ci-dessus, la solution consiste à envelopper le listview avec Expanded.

Mais lorsque vous avez affaire à des colonnes imbriquées, vous devez également limiter votre ListView à une certaine hauteur (j'ai souvent rencontré ce problème).

Si quelqu'un a une autre solution, veuillez la mentionner dans les commentaires ou ajouter une réponse.

Exemple

  SingleChildScrollView(
   child: Column(
     children: <Widget>[
       Image(image: ),//<< any widgets added
       SizedBox(),
       Column(
         children: <Widget>[
           Text('header'),  //<< any widgets added
            Expanded(child: 
            ListView.builder(
              //here your code
               scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
            return Container();
                   } 
         )
        ),
        Divider(),//<< any widgets added
         ],
       ),

     ],
   ), 
  );

Answer 2

En fait, si vous lisez la documentation, la liste d'affichage doit se trouver dans le widget élargi pour que cela puisse fonctionner.

  Widget build(BuildContext context) {
return Scaffold(
    body: Column(
  children: <Widget>[
    Align(
      child: PayableWidget(),
    ),
    Expanded(
      child: _myListView(context),
    )
  ],
));

}

Answer 3

Vous pouvez utiliser Flex y Flexible des widgets. par exemple :

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

) ;

Answer 4

Voici une méthode très simple. Il y a plusieurs façons de le faire, comme par exemple Expanded , Sizedbox o Container et elle doit être utilisée en fonction des besoins.

1. Utilice Expanded : Un widget qui développe un enfant d'une Row , Column ou Flex afin que l'enfant remplisse l'espace disponible.

   Expanded(
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(onPressed: null,
                 child: Text("Facebook")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Google")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Twitter"))
           ]),
     ),

En utilisant un Expanded fait un enfant d'un Row , Column ou Flex se développer pour remplir l'espace disponible le long de l'axe principal (par exemple, horizontalement pour une Ligne ou verticalement pour une Colonne).

2. Utilice SizedBox : Une boîte dont la taille est spécifiée.

   SizedBox(
       height: 100,
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(
                 color: Colors.white,
                 onPressed: null,
                 child: Text("Amazon")
             ),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Instagram")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("SoundCloud"))
           ]),
    ),

Si on lui donne un enfant, ce widget force son enfant à avoir une largeur et/ou une hauteur spécifique (en supposant que les valeurs sont autorisées par le parent de ce widget).

3. Utilice Container : Un widget de commodité qui combine des peinture , positionnement y Dimensionnement les widgets.

    Container(
       height: 80.0,
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(onPressed: null,
                 child: Text("Shopify")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Yahoo")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("LinkedIn"))
           ]),
     ),

La sortie pour les trois serait quelque chose comme ceci

Answer 5

Vous devez faire deux choses :

• envelopper Column à l'intérieur de SingleChildScrollView
• ajouter shrinkWrap: true y physics: NeverScrollableScrollPhysics() en ListView

Pourquoi ça marche :

Comme je le comprends, NeverScrollableScrollPhysics désactiver le défilement de ListView . Ainsi, le défilement fonctionne avec SingleChildScrollView . Si je me trompe, commentez ci-dessous.

SingleChildScrollView(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Filter'),
      ListView.separated(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: rides.length,
        itemBuilder: (BuildContext context, int index) {
          # return some widget
        }
      ),