web-dev-qa-db-fra.com

Comment puis-je disposer des widgets en fonction de la taille du parent?

Disons que vous avez un widget parent qui peut avoir une taille variable.

Par exemple:

var container = new Container(
   height: 200.0, // Imagine this might change
   width: 200.0, // Imagine this might change
   // Imagine content in this container will 
   // depend on the parent container
   child: new Container(), 
);

Et peut-être que vous voulez que l'enfant du conteneur parent rende quelque chose de différent en fonction de la taille qui lui est donnée.

Pensez à des points d'arrêt de conception réactifs, si la largeur est supérieure à X, utilisez cette disposition, si la largeur est inférieure à X, utilisez cette disposition.

Quelle est la meilleure façon de procéder à Flutter?

dartflutter
30
Dvdwasibi

Vous voudrez utiliser le widget LayoutBuilder qui construira au moment de la mise en page et fournit les contraintes du widget parent.

LayoutBuilder prend une fonction build() qui a la norme BuildContext avec BoxConstraints comme paramètres qui peuvent être utilisés pour aider rendre dynamiquement les widgets en fonction de la taille.

Construisons un exemple simple de widget qui rend "LARGE" si la largeur parent est supérieure à 200px et "SMALL" si la largeur parent est inférieure ou égale à cela.

var container = new Container(
  // Toggling width from 100 to 300 will change what is rendered
  // in the child container
  width: 100.0,
  // width: 300.0
  child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if(constraints.maxWidth > 200.0) {
        return new Text('BIG');
      } else {
        return new Text('SMALL');
      }
    }
  ),
);
51
Dvdwasibi