Les trois éléments sont en haut de l'écran et s'étirent pour remplir la largeur, mais je veux qu'ils s'étirent pour remplir l'écran verticalement de haut en bas.
J'ai essayé d'ajouter une Row autour de tout mais cela génère l'erreur RenderFlex children have non-zero flex but incoming width constraints are unbounded ? J'ai donc essayé d'encapsuler cette Row dans un widget Expanded qui lève l'erreur «Les widgets développés doivent être placés dans les widgets Flex».
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
children: <Widget>[
SizedBox(height: 20),
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,//throws error
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
],
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Bottom', textAlign: TextAlign.center),
),
],
),
],
),
);
4 Réponses :
cela devrait fonctionner avec les colonnes
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
],
),
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
),
],
),
);
Vous utilisez des appels pour prendre de la hauteur? Ce n'est sûrement pas la façon de le faire, il devrait pouvoir simplement s'étirer pour remplir l'écran comme il le fait avec la largeur des colonnes en utilisant crossAxisAlignment: CrossAxisAlignment.stretch . Il ne devrait pas du tout avoir besoin de paramètres de height , j'en suis sûr.
Ok, ça a l'air mieux maintenant, je pensais que vous utilisiez MediaQuery partout. Mais vous avez transformé les Columns en containers ? Ils doivent être des Columns .
chose drôle ... si vous enveloppez votre colonne extérieure dans un conteneur, vous n'avez pas du tout besoin d'appeler la hauteur.
Vous voulez dire emballé dans des conteneurs enveloppés dans Expanded?
Ouais, j'ai encore du mal avec ça. Flutter est un cauchemar pour ce genre de chose. Si seulement cela fonctionnait comme CSS lol.
Cela fonctionne un peu, mais le conteneur du bas n'a pas de hauteur. C'est comme ça pour toi? Cela devrait ressembler à l'image ci-jointe dans l'autre réponse. Si vous changez les couleurs de chaque boîte, il est plus facile de voir ce que je veux dire.
Continuons cette discussion en chat .
Êtes-vous sûr que toutes les parenthèses sont correctes? Pour une raison quelconque, je n'arrive pas à copier cela.
Voici la façon de répartir vos conteneurs uniformément (à la fois horizontalement et verticalement):
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
);
Résultat:
Ça a l'air bien mais le texte dans les conteneurs doit être dans des colonnes comme dans mon code d'origine. Ainsi, chaque boîte peut contenir plusieurs éléments.
C'est vrai, a juste besoin d'un petit ajustement. Au lieu que le widget Texte soit l'enfant du conteneur, l'enfant est une colonne. Il vous suffit d'ajouter les paramètres suivants à la colonne mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
En outre, vous pouvez utiliser ListView au lieu de Column pour éviter les avertissements de dépassement de contenu
Est-ce plutôt ce que vous recherchez?
Chaque conteneur contient une colonne vous permettant d'ajouter plusieurs widgets.
return Scaffold(
backgroundColor: Color(0xFF222222),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
],
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
],
),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
],
),
),
),
],
),
),
);
Oh oui ça a l'air bien. Je vais le tester et je vous répondrai.
Pour que les colonnes occupent toute la largeur de l'affichage et partagent la hauteur de manière égale, j'ai fait ce qui suit:
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: SizedBox(
width: double.infinity,
child: FlatButton(
onPressed: () {
playSound(1);
},
color: Colors.blue,
),
),
),
Le widget étendu partagera la hauteur tandis que le widget SizedBox occupera toute la largeur avec width est défini sur double.infinity.