web-dev-qa-db-fra.com

L'équivalent de wrap_content et match_parent dans flutter?

Dans Android, match_parent et wrap_content permettent de redimensionner automatiquement les widgets par rapport à leur parent par rapport au contenu du widget.

Dans Flutter, il semble que, par défaut, tous les widgets sont définis sur wrap_content, comment puis-je le modifier de manière à pouvoir remplir ses width et height avec ceux de leur parent?

flutter
22
Faisal Abid

La réponse courte est que le parent n'a pas de taille tant que l'enfant n'a pas de taille.

La mise en page fonctionne dans Flutter, c'est que chaque widget fournit des contraintes à chacun de ses enfants, comme "vous pouvez être aussi large que cela, vous devez être aussi grand, au moins aussi large", obtenir une largeur minimale, une largeur maximale, une hauteur minimale et une hauteur maximale). Chaque enfant prend ces contraintes, fait quelque chose et choisit une taille (largeur et hauteur) qui correspond à ces contraintes. Ensuite, une fois que chaque enfant a fait son travail, le widget peut choisir sa propre taille.

Certains widgets essaient d'être aussi gros que le permet le parent. Certains widgets essaient d'être aussi petits que le permet le parent. Certains widgets essaient de faire correspondre une certaine taille "naturelle" (par exemple, du texte, des images).

Certains widgets disent à leurs enfants qu'ils peuvent avoir n'importe quelle taille. Certains imposent à leurs enfants les mêmes contraintes que celles de leurs parents.

13
Ian Hickson

Afin d'obtenir un comportement pour match_parent _ et wrap_content nous avons besoin de utilisez la propriété mainAxisSize dans le widget Ligne/Colonne _, le mainAxisSize propriété prend MainAxisSize enum ayant deux valeurs qui est MainAxisSize.min qui se comporte comme wrap_content et MainAxisSize.max qui se comporte comme match_parent.

 enter image description here

Lien de l'article original

22
fluffyBatman

Si vous voulez un comportement wrap_content, cela dépend du widget parent que vous utilisez. Par exemple, si vous placez un bouton sur une colonne, il se comportera comme si wrap_content et si vous l'utilisiez comme match_parent, vous pouvez envelopper le bouton avec un widget développé.

Avec un ListView, le bouton obtient un comportement match_parent et pour obtenir un comportement wrap_content, vous pouvez l'envelopper avec un widget Flex tel que Row.

L'utilisation d'un widget développé permet à un enfant d'une ligne, d'une colonne ou d'un Flex de se développer pour remplir l'espace disponible sur l'axe principal (par exemple, horizontalement pour Une ligne ou verticalement pour une colonne) . https://docs.flutter.io/flutter/widgets/Expanded-class.html

L’utilisation d’un widget Flexible donne à l’enfant d’une rangée, d’une colonne ou d’un Flex la possibilité de se développer pour remplir l’espace disponible dans l’axe principal (par exemple, horizontalement pour une rangée ou verticalement pour une colonne), mais contrairement à Expanded, Flexible ne fonctionne pas. obliger l'enfant à remplir l'espace disponible . https://docs.flutter.io/flutter/widgets/Flexible-class.html

7
David H Moreno

Une solution de contournement simple:  

Si un conteneur n'a qu'un seul enfant de niveau supérieur, vous pouvez spécifier une propriété d'alignement pour l'enfant et lui attribuer toute valeur disponible. ça va remplir tout l'espace dans le conteneur.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Autrement: 

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)
1
behzad besharati

Utilisez cette ligne de codes dans la colonne . Pour wrap_content: mainAxisSize: MainAxisSize.min Pour match_parent: mainAxisSize: MainAxisSize.max

0
Naveen Aluri