Wrap

Mise en page

Engine\Native\Wrap place ses enfants en flux gauche-à-droite et revient automatiquement à la ligne dès qu'un enfant déborderait la largeur disponible — l'équivalent, dans l'arbre natif, du Wrap de Flutter (et de la classe utilitaire Tailwind flex-wrap côté Engine\Wrap HTML), rendu nécessaire par le fait qu'un Canvas n'a pas de flexbox sur lequel s'appuyer. Chaque enfant est mesuré avec des contraintes assouplies puis positionné ligne par ligne, avec un espacement horizontal (spacing) et vertical entre lignes (runSpacing).

Exemple

<?php

use Engine\Native\Wrap;
use Engine\Native\Container;
use Engine\Color;

$tags = new Wrap(
    [
        new Container(width: 60.0, height: 28.0, background: Color::indigo(100), radius: 14.0),
        new Container(width: 80.0, height: 28.0, background: Color::indigo(100), radius: 14.0),
        new Container(width: 50.0, height: 28.0, background: Color::indigo(100), radius: 14.0),
    ],
    spacing: 8.0,
    runSpacing: 12.0,
);

Trois pastilles de largeurs différentes s'enchaînent horizontalement avec 8px d'espace entre elles, et retournent à la ligne (avec 12px d'espace vertical) dès que la largeur disponible est dépassée.

Constructeur

Paramètre	Type	Défaut	Description
children	array<int, Widget>	—	Enfants placés en flux, dans l'ordre du tableau.
spacing	float	8.0	Espace horizontal entre deux enfants sur la même ligne.
runSpacing	float	8.0	Espace vertical entre deux lignes.

À savoir. Si la largeur du parent n'est pas bornée, aucun retour à la ligne ne se produit : la largeur max effective devient Constraints::INFINITY et tous les enfants restent sur une seule ligne.

Voir aussi

• Flex
• Flexible
• Stack