编程知识 cdmana.com

Conteneur, définir la largeur et la hauteur ne répond pas?

Scénario problématique:

Développement quotidien,On a eu des problèmes comme ça, Widget Largeur définie width: 100 Et ce n'est pas 100 Et les pixels??Et la façon habituelle de le faire est de Widget Mettez - le sur Center À l'intérieur,N'est - ce pas?

Container(
      height: 200,
      width: 200,
      color: Colors.red,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.green,
      ),
    )
Copier le Code

Nous avons créé un 200 * 200 RougeContainer,Il y en a un à l'intérieur. 100 * 100 VertContainer,Exécution,Le résultat que nous avons vu est que:

image.png La zone verte est complètement recouverte de contrôles parents rouges,VertContainerLe réglage de la largeur et de la hauteur n'a pas été répondu,Pourquoi est - ce arrivé?Résoudre ce problème,Nous devons être clairsFlutterRègles de mise en page:

Contrainte transmise vers le bas,SizeVers le Haut, Position de réglage du parent

Alors..., Quand on est en vert Container La couche externe est imbriquée d'un autre CenterHeure,RougeContainer Les limites de largeur et de hauteur pour les sous - commandes sont CenterConsommation,EtCenter Vert autorisé Container Taille libre .

Container(
        height: 200,
        width: 200,
        color: Colors.red,
        child: Center(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.green,
          ),
        ),
      )
Copier le Code

image.png

##### Je répète ce qui est important :

  • Widget Obtenir ses propres contraintes de ses parents . Contrainte uniquement par 4- Oui. double Composition du type : Largeur minimale et maximale 、 Hauteur minimale et maximale .
  • Widget Seulement au niveau du parent (Parent) Détermine sa taille dans les limites de .Cela signifie Widget En général, il ne peut pas avoir la taille qu'il veut
Scaffold(
   body: Container(
      color: Colors.blue,
      child: Column(
         children: [
            Text('Hello!'),
            Text('Goodbye!'),
         ]
      )
   )
)
Copier le Code

image.png ScaffoldNon, c'est vrai.Container Lors de la contrainte ,Container La largeur et la hauteur de est la largeur et la hauteur de l'enfant

Scaffold(
  body: SizedBox.expand(
    child: Container(
        color: Colors.blue,
        child: Column(
          children: [
            Text('Hello!'),
            Text('Goodbye!'),
          ],
        )),
  ),
);
Copier le Code

image.png En tant que contrôle parent ,SizedBox.expand C'est exact. Container La largeur et la hauteur de , Exige que la taille de ses contrôles enfants soit égale à Scaffold C'est exactement la même taille .

版权声明
本文为[Li xiaobangNuggets]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164425978x.html

Scroll to Top