Utilisation de Containers¶

Les Ancres sont un moyen efficace de gérer les différents rapports de taille pour une gestion basique des résolutions multiples dans les interfaces graphiques,

Pour les interfaces utilisateur plus complexes, elles peuvent devenir difficiles à utiliser.

C'est souvent le cas des jeux, tels que les RPG, les chats en ligne, les tycoons ou les simulations. Un autre cas courant où des fonctionnalités de mise en page plus avancées peuvent être nécessaires est celui des outils dans le jeu (ou simplement des outils).

Toutes ces situations nécessitent une interface utilisateur plus performante, de type OS, avec une mise en page et un formatage avancés. Pour cela, Containers sont plus utiles.

Conteneurs de disposition¶

Les conteneurs fournissent une énorme puissance de mise en page (par exemple, l'interface utilisateur de l'éditeur Godot est entièrement réalisée avec eux) :

Quand un nœud dérivé de Container est utilisé, tous les nœuds enfants Control abandonnent leur propre capacité de positionnement. Cela signifie que le Container contrôlera leur positionnement et que toute tentative de modification manuelle de ces nœuds sera soit ignorée soit invalidée lors du prochain redimensionnement de leur parent.

De même, lorsqu'un nœud dérivé de Container est redimensionné, tous ses enfants seront repositionnés en fonction de celui-ci, avec un comportement basé sur le type de conteneur utilisé :

Exemple de HBoxContainer redimensionnant les boutons enfants.

La vraie force des conteneurs est qu'ils peuvent être emboîtés (en tant que nœuds), permettant la création de mises en page très complexes qui se redimensionnent sans effort.

Size flags (Marqueurs de dimension)¶

Lors de l'ajout d'un nœud à un conteneur, la façon dont le conteneur traite chaque enfant dépend principalement de ses size flags. Ces drapeaux peuvent être trouvés en inspectant tout control qui est un enfant d'un Container.

les size flags sont indépendants pour la taille verticale et horizontale et tous les conteneurs ne les utilisent pas (mais la plupart le font) :

Fill : Veille à ce que le control remplisse la zone désignée à l'intérieur du conteneur. Peu importe si un control s'étend ou non (voir ci-dessous), il ne remplit la zone désignée que lorsque ce drapeau est activée (c'est le cas par défaut).
Expand : Tente d'utiliser le plus d'espace possible dans le conteneur parent (dans chaque axe). Les Controls qui ne s'étendent pas seront repoussées par ceux qui le font. Entre ceux qui s'étendent, l'espace qu'ils prendront par rapport aux autres est déterminé par le Ratio (voir ci-dessous).
Shrink Center Lors de l'expansion (et si pas de remplissage), essaye de rester au centre de la zone (par défaut, reste à gauche ou en haut).
Ratio Rapport simple de combien les controls élargis occupent l'espace disponible les uns par rapport aux autres. Un control avec "2", prendra deux fois plus d'espace disponible qu'un control avec "1".

Il est recommandé d'expérimenter avec ces drapeaux et différents conteneurs pour mieux comprendre leur fonctionnement.

Types de conteneurs¶

Godot fournit plusieurs types de conteneurs de base car ils servent à des fins différentes :

Box Containers¶

Arrangez les contrôles enfants verticalement ou horizontalement (via HBoxContainer et VBoxContainer). Dans la direction opposée à la direction désignée (verticale pour un conteneur horizontal), cela ne fait qu'agrandir les enfants.

Ces conteneurs utilisent la propriété Ratio pour les enfants avec le drapeau Expand activé.

Conteneur de grille¶

Arrange les controls enfants dans une disposition en grille (via GridContainer, la quantité de colonnes doit être spécifiée). Utilise les flags expand verticale et horizontale.

Conteneur de marge¶

Les controls enfants sont étendus vers les limites de ce control (via MarginContainer). Des espaces seront ajoutés dans les marges en fonction de la configuration du thème.

Encore une fois, gardez à l'esprit que les marges sont une valeur de Theme, donc elles doivent être éditées dans la section de réécriture des constantes de chaque Control :

Conteneur d'onglet¶

Vous permet de placer plusieurs contrôles enfants empilés les uns sur les autres (via TabContainer), avec seulement celui qui est current de visible.

Changer de current se fait via les onglets situés en haut du conteneur, par un clic :

Les titres sont générés par défaut à partir des noms de nœuds (bien qu'ils puissent être réécrit via l'API TabContainer).

Les paramètres tels que le placement des onglets et la StyleBox peuvent être modifiés en réécrivant le thème du TabContainer.

Split Container¶

Accepte seulement un ou deux controls enfants, puis les place côte à côte avec un diviseur (via HSplitContainer et VSplitContainer). Respecte les flags horizontaux et verticaux, ainsi que le Ratio.

Le diviseur peut être déplacé pour modifier la relation de taille entre les deux enfants :

PanelContainer¶

Conteneur simple qui dessine une StyleBox, puis agrandit les enfants pour couvrir toute sa surface (via PanelContainer, en respectant les marges de la StyleBox). Il respecte les flags de taille horizontale et verticale.

Ce conteneur est utile comme niveau supérieur, ou simplement pour ajouter des arrière-plans personnalisés à des sections d'une mise en page.

ScrollContainer¶

Accepte un seul nœud enfant. Si ce nœud est plus grand que le conteneur, des barres de défilement seront ajoutées pour permettre de voir le nœud en entier (via ScrollContainer). Les flags de taille verticale et horizontale sont respectés, et le comportement peut être activé ou désactivé par axe dans les propriétés.

La molette de la souris et le glissement tactile (lorsque le tactile est disponible) sont également des moyens valables de faire pivoter le enfant control.

Comme dans l'exemple ci-dessus, une des façons les plus courantes d'utiliser ce conteneur est de l'utiliser avec un VBoxContainer en tant qu'enfant.

ViewportContainer¶

C'est un control spécial qui n'acceptera qu'un seul nœud Viewport comme enfant, et il l'affichera comme si c'était une image (via ViewportContainer).

Création de conteneurs personnalisés¶

Il est possible de créer facilement un conteneur personnalisé à l'aide d'un script. Voici un exemple d'un conteneur simple qui adaptent ses enfants à sa rect size :

extends Container

func _notification(what):
    if what == NOTIFICATION_SORT_CHILDREN:
        # Must re-sort the children
        for c in get_children():
            # Fit to own size
            fit_child_in_rect( c, Rect2( Vector2(), rect_size ) )

func set_some_setting():
    # Some setting changed, ask for children re-sort
    queue_sort()