L'équivalent de wrap_content et match_parent en flutter?

Question

Dans Android match_parent et wrap_content sont utilisés pour redimensionner automatiquement les widgets par rapport à leur parent en fonction du contenu du widget.

Dans Flutter, il semble que par défaut, tous les widgets sont définis sur wrap_content , comment pourrais-je le changer de sorte que je puisse remplir son width et height à celui de son parent ?

Answer 1

Afin d'obtenir le comportement de match_parent et wrap_content nous avons besoin de utilisation mainAxisSize propriété en Rangée/Colonne de widget, le mainAxisSize la propriété est MainAxisSize enum avoir deux valeurs qui est MainAxisSize.min qui se comporte comme wrap_content et MainAxisSize.max qui se comporte comme match_parent.

Lien de l'Article original

Answer 2

La réponse courte est que les parents n'ont pas une taille jusqu'à ce que l'enfant a une taille.

La voie d'aménagement dans le battement est que chaque widget fournit des contraintes de chacun de ses enfants, comme "vous pouvez être jusqu'à cette échelle, vous devez être de cette taille, vous devez être au moins à cette échelle", ou que ce soit (en particulier, ils obtiennent une largeur minimale, une largeur, une hauteur minimale, et d'une hauteur maximale). Chaque enfant prend ces contraintes, en fait quelque chose, et choisit une taille (largeur et hauteur) qui correspond à ces contraintes. Ensuite, une fois que chaque enfant a fait sa chose, le widget peut choisir sa propre taille.

Certains widgets essayer d'être aussi grand que le parent permet. Certains widgets essayez d'être aussi petite que la mère le permet. Certains widgets essayer de correspondre à une certaine "naturel" de la taille (par exemple, texte, images).

Certains widgets dire à leurs enfants qu'ils peuvent être de toute taille qu'ils veulent. Certains donnent à leurs enfants les mêmes contraintes qu'ils ont obtenu de leurs parents.

Answer 3

Si vous voulez un wrap_content comportement dépend du parent du widget que vous utilisez, par exemple, si vous placez un bouton sur une colonne, il se comporte comme wrap_content et de l'utiliser comme match_parent vous pouvez envelopper le bouton avec un widget Agrandi.

Avec une ListView le bouton obtient un match_parent comportement et d'obtenir un wrap_content problème, vous pouvez l'envelopper avec un Flex widget comme Ligne.

À l'aide d'un widget Agrandi qui fait qu'un enfant d'une Ligne, une Colonne ou Flex développer pour remplir l'espace disponible dans l'axe principal (par exemple, à l'horizontale pour une Ligne ou à la verticale d'une Colonne). https://docs.flutter.io/flutter/widgets/Expanded-class.html

L'utilisation d'un Flexible widget donne à l'enfant d'une Ligne, une Colonne, ou la flexion de la flexibilité pour développer de remplir l'espace disponible dans l'axe principal (par exemple, à l'horizontale pour une Ligne ou à la verticale d'une Colonne), mais, à la différence d'Étendue, Flexible ne nécessite pas l'enfant de remplir l'espace disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Answer 4

Une solution simple:

Si un conteneur n'a qu'un seul enfant de niveau supérieur, vous pouvez spécifier la propriété d'alignement pour l'enfant et lui donner toute valeur disponible. cela remplira 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
   )
)
 

Answer 5

Utilisez cette ligne de codes à l'intérieur de la colonne. Pour wrap_content: mainAxisSize: MainAxisSize.min Pour match_parent: mainAxisSize: MainAxisSize.max