J'essaie d'étendre le widget à l'intérieur du widget Colonne mais je ne parviens pas à le faire dépenser.
Lorsque vous attribuez une hauteur constante au widget parent, la mise en page sera rendue comme prévu. Mais comme je supprime la mise en page à hauteur constante, ce n'est pas comme prévu car je veux faire Listview avec et je ne devrais pas donner une hauteur constante au widget qui sera utilisé comme élément de listview.
Voici ma mise en page code.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'layout test',
home: Layout_test_class(),
));
}
class Layout_test_class extends StatelessWidget {
Widget cell() {
return Container(
color: Colors.yellow,
// height: 200, after un commenting this will work. but i want to make it without this
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('apple z'),
),
),
Container(
color: Colors.red,
child:Text('apple 2'),
)
],
),
),
Column(
children: <Widget>[
Container(
color: Colors.black,
width: 200,
height: 200,
),
],
),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: Center(
child: ListView(
children: <Widget>[
cell(),
],
)
),
);
}
}
Voici ma capture d'écran de sortie attendue.
4 Réponses :
Essayez d'encapsuler votre conteneur avec IntrinsicHeight
return IntrinsicHeight(
Container(
color: Colors.yellow
child: ...
)
)
Je l'ai essayé et ça marche. Pour être clair, vous devez envelopper la cellule entière avec IntrinsicHeight .
Une note sur IntrinsicHeight de la documentation Flutter: Cette classe est relativement chère, car elle ajoute une mise en page spéculative avant la phase de mise en page finale. Évitez de l'utiliser autant que possible.
En fait, bien au contraire, si vous prévoyez de l'utiliser comme élément dans une listView , vous ne pouvez pas laisser une taille infinie sur le même axe que votre listView défilement.
Laisse-moi expliquer:
Actuellement, vous ne définissez aucune hauteur sur votre widget cell () , ce qui est bien si vous l'utilisez seul. comme ceci:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'layout test',
home: Layout_test_class(),
));
}
class Layout_test_class extends StatelessWidget {
Widget cell(double height) {
return Container(
color: Colors.yellow,
height: height, //after un commenting this will work. but i want to make it without this
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('apple z'),
),
),
Container(
color: Colors.red,
child: Text('apple 2'),
)
],
),
),
Column(
children: <Widget>[
Container(
color: Colors.black,
width: 200,
height: 200,
),
],
),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ListView(
children: <Widget>[
cell(250.0),
cell(230.0),
cell(300.0),
],
)
);
}
}
Mais en l'utilisant avec une listView vous devez définir une hauteur . Un listView défile tant qu'il a du contenu à faire défiler. Pour le moment, c'est comme si vous lui donniez un contenu infini pour qu'il défile indéfiniment. Au lieu de cela, Flutter ne le construit pas.
Il est en fait tout à fait correct de définir une taille globale pour votre conteneur (en tant qu'élément). Vous pouvez même définir une taille spécifique pour chacun en utilisant un paramètre comme celui-ci:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'layout test',
home: Layout_test_class(),
));
}
class Layout_test_class extends StatelessWidget {
Widget cell() {
return Container(
color: Colors.yellow,
//height: 250, after un commenting this will work. but i want to make it without this
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('apple z'),
),
),
Container(
color: Colors.red,
child: Text('apple 2'),
)
],
),
),
Column(
children: <Widget>[
Container(
color: Colors.black,
width: 200,
height: 200,
),
],
),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: cell(),
);
}
}
Mais qu'en est-il quand il y a un contenu de hauteur dynamique dans la cellule / l'élément de vue de liste. Je ne peux pas fixer la hauteur de l'élément de cellule / liste.
Votre ListView doit être à l'intérieur de Flexible . Flexible à l'intérieur de la colonne définira la hauteur maximale disponible pour ListView . ListView a besoin d'une hauteur finie du parent, Flexible fournira cela basé sur max. espace disponible.
Column(
children: <Widget>[
Flexible(
child: ListView.builder(...)
),
Container(
color: Colors.red,
child:Text('apple 2'),
),
],
)
Une bonne façon de faire cela, c'est de jouer avec le MediaQuery , la hauteur et la largeur.
Laissez-moi vous expliquer, si vous voulez que le widget ait la hauteur maximale d'un écran de décision vous pouvez le définir comme ceci:
Container( width: MediaQuery.of(context).size.width // Can divide by any value you want here )
Vous pouvez le manipuler en divisant par 2, 3, 400, la valeur que vous voulez.
Les mêmes choses fonctionne pour la largeur
Container( height: MediaQuery.of(context).size.height // Full screen size )
vous devriez essayer ma réponse.