Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Utilizzare i Container

Gli ancoraggi sono un modo efficiente per gestire diversi rapporti di aspetto per la gestione basilare di più risoluzioni nelle interfacce grafiche utente (GUI).

Per le interfacce utente più complesse, potrebbero diventare difficile da utilizzare.

Questo è spesso il caso di giochi come gli RPG, le chat online, i tycoon o le simulazioni. Un altro caso comune in cui potrebbero essere necessarie funzionalità più avanzate di layout sono strumenti di gioco (o semplicemente strumenti).

Tutte queste situazioni richiedono un'interfaccia utente più funzionale, simile a quella di un sistema operativo, con layout e formattazione avanzati. Per questo, i Container sono più utili.

Container layout

Containers provide a huge amount of layout power (as an example, the Godot editor user interface is entirely done using them):

Quando si usa un nodo derivato da Container, tutti i nodi Control figlio rinunciano alla propria capacità di posizionamento. Ciò significa che il Container controllerà il loro posizionamento e qualsiasi tentativo di modifica manuale di questi nodi verrà ignorato o invalidato la prossima volta che il nodo padre viene ridimensionato.

Allo stesso modo, quando un nodo derivato da un Container viene ridimensionato, tutti i suoi figli verranno riposizionati di conseguenza, con un comportamento basato sul tipo di contenitore utilizzato:

Esempio di HBoxContainer ridimensionante i pulsanti figlio.

Il vero potenziale dei contenitori è che si possono annidare (come nodi), consentendo la creazione di layout molto complessi che si ridimensionano senza sforzo.

Opzioni di dimensionamento

When adding a node to a container, the way the container treats each child depends mainly on their container sizing options. These options can be found by inspecting the layout of any Control that is a child of a Container.

Le opzioni di dimensionamento sono indipendenti per il dimensionamento verticale e orizzontale e non tutti i contenitori le utilizzano (ma quasi tutti sì):

Fill: Ensures the control fills the designated area within the container. No matter if a control expands or not (see below), it will only fill the designated area when this is toggled on (it is by default).
Expand: tenta di utilizzare il più spazio possibile nel contenitore padre (su ciascun asse). I controlli che non si espandono verranno allontanati da quelli che lo fanno. Tra i controlli in espansione, la quantità di spazio che occupano l'uno dall'altro è determinata dal Rapporto di allungamento (vedi sotto). Questa opzione è disponibile solo quando il contenitore padre è del tipo corretto, ad esempio HBoxContainer ha questa opzione per il dimensionamento orizzontale.
Shrink Begin quando si espande, tenta di rimanere a sinistra o in alto nell'area espansa.
Shrink Center quando si espande, tenta di rimanere al centro dell'area espansa.
Shrink End quando si espande, tenta di rimanere a destra o in basso nell'area espansa.
Stretch Ratio: The ratio of how much expanded controls take up the available space in relation to each other. A control with "2", will take up twice as much available space as one with "1".

È raccomandato sperimentare con questi flag e contenitori diversi per comprenderne meglio come funzionano.

Tipi di contenitori

Godot fornisce diversi tipi di contenitori pronti all'uso, in quanto servono a scopi diversi:

Box Containers

Dispone i controlli figlio verticalmente o orizzontalmente (tramite HBoxContainer e VBoxContainer). Nella direzione opposta a quella designata (ad esempio, verticale per un contenitore orizzontale), espande semplicemente i figli.

Questi contenitori sfruttano la proprietà Rapporto di allungamento per gli elementi figlio con il flag Expand impostato.

Grid Container

Dispone i controlli figlio in una disposizione a griglia (tramite GridContainer, è necessario specificare il numero di colonne). Utilizza i flag di espansione sia verticale sia orizzontale.

Margin Container

I controlli figlio sono espansi verso i limiti di questo controllo (tramite MarginContainer). Il rientro verrà aggiunto ai margini in base alla configurazione del tema.

Ancora una volta, tieni presente che i margini sono un valore del Tema, quindi si devono modificare dalla sezione delle sostituzioni di costanti in ciascun controllo:

Contenitore di schede

Consente di posizionare più controlli figlio uno sopra l'altro (tramite TabContainer), lasciando visibile solo quello attuale.

Il cambio di quello attuale si fa tramite le schede poste in alto al contenitore, cliccandoci:

I titoli sono generati normalmente dai nomi dei nodi (sebbene si possano sovrascrivere tramite l'API del TabContainer).

È possibile modificare impostazioni quali il posizionamento delle schede e lo StyleBox nelle sostituzioni del tema del TabContainer.

Contenitore divisore

Arranges child controls vertically or horizontally and creates grabbers between them (via HSplitContainer and VSplitContainer). Respects both horizontal and vertical expand flags, as well as Stretch Ratio.

The grabbers can be dragged around to change the size relation between the children:

PanelContainer

Un contenitore che disegna uno StyleBox, poi espande i figli per coprire la sua intera area (tramite PanelContainer, rispettando i margini dello StyleBox). Rispetta sia le opzioni di dimensionamento orizzontale sia verticale.

Questo contenitore è utile come controllo di primo livello, o semplicemente per aggiungere sfondi personalizzati alle sezioni di un layout.

FoldableContainer

Un contenitore che può essere espanso/compresso (tramite FoldableContainer). I controlli figlio sono nascosti quando il contenitore è compresso.

ScrollContainer

Accetta un singolo nodo figlio. Se questo nodo è più grande del contenitore, saranno aggiunte barre di scorrimento per spostare il nodo all'interno (tramite ScrollContainer). Sono rispettate entrambe le opzioni di dimensione verticale e orizzontale e il comportamento si può attivare o disattivare per ogni asse nelle proprietà.

Anche la rotellina del mouse e il trascinamento tattile (quando il tocco è disponibile) sono metodi validi per spostare il controllo figlio.

Come nell'esempio precedente, uno dei modi più comuni per utilizzare questo contenitore è insieme a un VBoxContainer come figlio.

AspectRatioContainer

Un tipo di contenitore che dispone i suoi controlli figlio in modo da mantenerne automaticamente le proporzioni quando il contenitore viene ridimensionato (tramite AspectRatioContainer). Ha diverse modalità di stiramento, che forniscono opzioni per regolare le dimensioni dei controlli figlio in base al contenitore: "riempi" (fill), "larghezza controlla altezza" (width control height), "larghezza controlla altezza" (height control width) e "copri" (cover).

Utile quando c'è bisogno di un contenitore che deve essere dinamico e reattivo alle diverse dimensioni dello schermo e si desidera che gli elementi figlio siano ridimensionati proporzionalmente senza perdere le loro forme previste.

FlowContainer

FlowContainer è un contenitore che dispone i suoi controlli figlio orizzontalmente o verticalmente (tramite HFlowContainer e tramite VFlowContainer). Quando lo spazio disponibile si esaurisce, sposta i figli nella riga o colonna successiva, in modo simile a come il testo va a capo in un libro.

Utile per creare layout flessibili in cui i controlli figlio si adattano automaticamente allo spazio disponibile senza sovrapporsi.

CenterContainer

CenterContainer è un contenitore che mantiene automaticamente tutti i suoi controlli figlio centrati al suo interno, alle loro dimensioni minime. Garantisce che i controlli figlio siano sempre allineati al centro, semplificando la creazione di layout centrati senza posizionamento manuale (tramite CenterContainer).

SubViewportContainer

Questo è un controllo speciale che accetterà solo un singolo nodo Viewport come figlio e lo visualizzerà come se fosse un'immagine (tramite SubViewportContainer).

Creare contenitori personalizzati

È possibile creare un contenitore personalizzato tramite script. Ecco un esempio di contenitore che adatta i nodi figlio alle sue dimensioni:

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(), size))

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

using Godot;

public partial class CustomContainer : Container
{
    public override void _Notification(int what)
    {
        if (what == NotificationSortChildren)
        {
            // Must re-sort the children
            foreach (Control c in GetChildren())
            {
                // Fit to own size
                FitChildInRect(c, new Rect2(new Vector2(), Size));
            }
        }
    }

    public void SetSomeSetting()
    {
        // Some setting changed, ask for children re-sort.
        QueueSort();
    }
}