L'équivalent de wrap_content et match_parent dans flutter?

127

Dans Android match_parentet wrap_contentsont utilisés pour redimensionner les widgets automatiquement par rapport à leur parent au contenu que le widget contient.

Dans Flutter, il semble que tous les widgets sont définis par défaut sur wrap_content, comment le changerais-je de manière à pouvoir le remplir widthet heightà celui de son parent?

Faisal Abid
la source

Réponses:

161

Vous pouvez le faire avec un petit truc: supposons que vous ayez besoin de: (Largeur, Hauteur)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);
sourav pandit
la source
2
pour correspondre au parent, vous pouvez également envelopper vos widgets avec SizedBox.expand ()
Wecherowski
138

Pour obtenir un comportement pour match_parent et wrap_content nous devons utiliser mainAxisSize propriété en ligne / colonne widget, 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 .

entrez la description de l'image ici

Lien de l'article original

pelucheuxBatman
la source
6
J'ajouterais qu'il y a aussi le crossAxisAlignmentchamp sur les lignes et les colonnes qui peut être configuré CrossAxisAlignment.stretchpour s'étendre horizontalement dans une colonne par exemple
wamfous
1
Merci beaucoup! J'ai voté l'année dernière, puis je n'ai pas utilisé le flutter depuis longtemps et j'ai presque tout oublié, et vous m'avez encore aidé aujourd'hui.
Chandler
33

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

La façon dont la mise en page fonctionne dans Flutter est que chaque widget fournit des contraintes à chacun de ses enfants, comme "vous pouvez être aussi large, vous devez être aussi grand, vous devez être au moins aussi large", ou autre (en particulier, ils 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 parent le permet. Certains widgets essaient d'être aussi petits que le parent le permet. Certains widgets essaient de correspondre à une certaine taille "naturelle" (par exemple du texte, des images).

Certains widgets indiquent à leurs enfants qu'ils peuvent avoir la taille de leur choix. Certains donnent à leurs enfants les mêmes contraintes que leurs parents.

Ian Hickson
la source
Ian, quand j'ai un PageViewinside a Column, avec un autre Columndans le courant page, j'obtiens une erreur de rendu, mais je peux la corriger en enveloppant l' PageViewintérieur d'un Expandedou a Flexible. Le problème est que ces 2 options ne font qu'augmenter leur enfant. Pourquoi n'y a-t-il pas de widget connexe pour réduire la taille, comme «envelopper le contenu», pour résoudre ce type de problèmes de rendu?
Michel Feinstein
21

Il existe en fait quelques options disponibles:

Vous pouvez utiliser SizedBox.expand pour que votre widget corresponde aux dimensions des parents, ou SizedBox (width: double.infinity) pour ne correspondre qu'à la largeur ou SizedBox (heigth: double.infinity) pour ne correspondre qu'à la hauteur.

Si vous voulez un comportement wrap_content, cela dépend du widget parent que vous utilisez, par exemple si vous mettez un bouton sur une colonne, il se comportera comme wrap_content et pour l'utiliser comme match_parent, vous pouvez envelopper le bouton avec un widget étendu ou une sizebox.

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 comme 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 dans 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 ligne, d'une colonne ou d'un flex la flexibilité de s'étendre pour remplir l'espace disponible dans l'axe principal (par exemple, horizontalement pour une ligne ou verticalement pour une colonne), mais, contrairement à Expanded, Flexible ne le fait pas demander à l'enfant de remplir l'espace disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html

David H Moreno
la source
7

Une solution de contournement 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 du 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
   )
)
behzad besharati
la source
BoxConstraints.expand(height: 100.0)fonctionne très bien comme l' width="match_parent"équivalent d'Android
kosiara - Bartosz Kosarzycki
6

J'ai utilisé cette solution, vous devez définir la hauteur et la largeur de votre écran à l'aide de MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )
ayoub boumzebra
la source
5
Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),
malibayram91
la source
1
Bien que votre code puisse répondre à la question, une bonne réponse doit toujours expliquer ce que fait le code et comment il résout le problème.
BDL
ce n'est pas la réponse pour envelopper le contenu. il s'agit simplement d'une largeur et d'une hauteur codées en dur.
Developine
1

Utilisez le widget Wrap.

Pour Columnun comportement similaire, essayez:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Pour Rowun comportement similaire, essayez:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Pour plus d'informations: Wrap (Flutter Widget)

Farwa
la source
0

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

Naveen Aluri
la source
0

Il existe en fait un moyen très simple et soigné de le faire.

Utilisez un FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Ce widget est également très utile lorsque vous souhaitez dimensionner votre enfant à une fraction de la taille de son parent.

Exemple:

Si vous voulez que l'enfant occupe 50% de la largeur de son parent, indiquez widthFactorcomme0.5

Mohammed Sadiq
la source
0

Pour qu'un enfant remplisse son parent, enveloppez-le simplement dans une FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )
Miraj Khandaker
la source