J'essaie de créer une page de connexion simple pour mon application Flutter. J'ai construit avec succès les boutons TextFields et Login / Signin. Je veux ajouter un ListView horizontal. Lorsque j'exécute le code, mes éléments disparaissent, si je le fais sans ListView, ça va à nouveau. Comment puis-je faire cela 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),
),
),
);
la source
J'ai aussi ce problème. Ma solution est d'utiliser un
Expanded
widget pour agrandir l'espace restant.la source
Raison de l'erreur:
Column
se développe jusqu'à la taille maximale dans la direction de l'axe principal (axe vertical), tout comme leListView
.Solutions
Vous devez donc contraindre la hauteur du fichier
ListView
. Il existe de nombreuses façons de le faire, vous pouvez choisir celle qui correspond le mieux à vos besoins.Si vous voulez permettre
ListView
de prendre tout l' espace restant à l' intérieurColumn
utilisationExpanded
.Si vous souhaitez limiter votre
ListView
à certainsheight
, vous pouvez utiliserSizedBox
.Si votre
ListView
est petit, vous pouvez essayer uneshrinkWrap
propriété dessus.la source
J'ai
SingleChildScrollView
comme parent, et unColumn
widget , puis un widget d'affichage de liste comme dernier enfant.L'ajout de ces propriétés dans la vue Liste a fonctionné pour moi.
la source
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.
Ici, nous devrions utiliser le widget Flexible car il ne prendra que l'espace requis car Expanded prend le plein écran même s'il n'y a pas assez de widgets pour un rendu en plein écran.
la source
En fait, lorsque vous lisez des documents, ListView doit être à l'intérieur du widget étendu pour qu'il puisse fonctionner.
}
la source
Comme cela a été mentionné par d'autres ci-dessus, Wrap listview avec Expanded est la solution.
Mais lorsque vous traitez avec des colonnes imbriquées, vous devrez également limiter votre ListView à une certaine hauteur (ce problème est souvent rencontré).
Si quelqu'un a une autre solution, veuillez la mentionner en commentaire ou ajouter une réponse.
Exemple
la source
Vous pouvez utiliser
Flex
et desFlexible
widgets. par exemple:);
la source
la source
Essayez d'utiliser Slivers:
la source