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...

Verwendung von Containern

Anker sind ein effizienter Weg, um verschiedene Seitenverhältnisse für die grundlegende Handhabung mehrerer Auflösungen in GUIs zu handhaben.

Bei komplexeren Benutzeroberflächen kann die Verwendung schwierig werden.

Dies ist häufig der Fall bei Spielen wie RPGs, Online-Chats, Tycoons oder Simulationen. Ein weiterer häufiger Fall, in dem erweiterte Layout-Funktionen erforderlich sein können, sind In-Game-Tools (oder einfach nur Tools).

All diese Situationen erfordern eine leistungsfähigere, OS-ähnliche Benutzeroberfläche mit fortgeschrittenem Layout und Formatierung. Hierfür sind Container nützlicher.

Containerlayout

Container bieten eine riesige Menge an Layout-Möglichkeiten (die Benutzeroberfläche des Godot-Editors ist zum Beispiel vollständig mit Containern gestaltet):

Wenn ein von Container abgeleiteter Node verwendet wird, geben alle untergeordneten Control-Nodes ihre eigene Positionierungsfähigkeit auf. Das bedeutet, dass der Container ihre Positionierung kontrolliert und jeder Versuch, diese Nodes manuell zu verändern, wird ignoriert oder bei der nächsten Größenänderung des Parent-Nodes ungültig gemacht.

Wenn ein von Container abgeleiteter Node in der Größe verändert wird, werden alle seine Child-Nodes entsprechend neu positioniert, wobei das Verhalten vom Typ des verwendeten Containers abhängt:

Beispiel für HBoxContainer, der die Größe der Child-Buttons ändert.

Die wahre Stärke von Containern liegt darin, dass sie (als Nodes) verschachtelt werden können, was die Erstellung sehr komplexer Layouts ermöglicht, die sich mühelos in der Größe verändern lassen.

Optionen zur Größenanpassung

Wenn Sie einen Node zu einem Container hinzufügen, hängt die Art und Weise, wie der Container jeden Child-Node behandelt, hauptsächlich von den Container-Größenanpassungs-Optionen ab. Diese Optionen lassen sich ermitteln, indem man das Layout jedes Controls im Inspektor untersucht, das ein Child-Node eines Containers ist.

Die Größenanpassungs-Optionen sind für die jeweils unabhängig für die vertikale und horizontale Größenanpassung und werden nicht von allen Containern genutzt (aber von den meisten):

Füllen: Stellt sicher, dass das Control den vorgesehenen Bereich innerhalb des Containers ausfüllt. Unabhängig davon, ob ein Control expandiert oder nicht (siehe unten), füllt es den vorgesehenen Bereich nur dann aus, wenn diese Option aktiviert ist (Default).
Expandieren: Versucht, so viel Platz wie möglich im Parent-Container (in jeder Achse) zu nutzen. Controls, die nicht expandieren, werden von denen verdrängt, die expandieren. Zwischen den expandierenden Controls wird die Menge an Platz, die sie voneinander wegnehmen, durch das Streckungsverhältnis (siehe unten) bestimmt. Diese Option ist nur verfügbar, wenn der Parent-Container vom richtigen Typ ist, z.B. hat der HBoxContainer diese Option für die horizontale Größenanpassung.
Zum Anfang verkleinern Versucht beim Expandieren, am linken oder oberen Rand des expandierten Bereichs zu bleiben.
Zur Mitte schrumpfen Versucht beim Expandieren, in der Mitte des expandierten Bereichs zu bleiben.
Zum Ende Schrumpfen Versucht, beim Expandieren am rechten oder unteren Rand des expandierten Bereichs zu bleiben.
Streckungsverhältnis: Das Verhältnis, in dem die erweiterten Controls den verfügbaren Platz im Verhältnis zueinander einnehmen. Ein Control mit "2" nimmt doppelt so viel Platz ein wie eines mit "1".

Es empfiehlt sich, mit diesen Flaggen und verschiedenen Behältern zu experimentieren, um die Funktionsweise besser zu verstehen.

Containertypen

Godot stellt verschiedene Containertypen zur Verfügung, da diese unterschiedlichen Zwecken dienen:

Box-Container

Ordnet Child-Controls vertikal oder horizontal an (über HBoxContainer und VBoxContainer). In der entgegengesetzten Richtung (z. B. vertikal für einen horizontalen Container) werden die Child-Controls einfach erweitert.

These containers make use of the Stretch Ratio property for children with the Expand flag set.

Raster-Container

Ordnet Child-Controls in einem Raster-Layout an (über GridContainer, Anzahl der Spalten muss angegeben werden). Verwendet sowohl die vertikalen als auch die horizontalen Expandieren-Flags.

Seitenrand-Container

Child-Controls werden in Richtung der Ränder dieses Controls erweitert (über MarginContainer). Abhängig von der Konfiguration des Themes wird an den Seitenrändern ein Padding hinzugefügt.

Beachten Sie auch hier, dass die Seitenränder ein Theme-Wert sind, sodass sie im Abschnitt zum Überschreiben von Konstanten jedes Controls bearbeitet werden müssen:

Tab-Container

Ermöglicht es Ihnen, mehrere untergeordnete Controls übereinander zu platzieren (über TabContainer), wobei nur das aktuelle Control sichtbar ist.

Das Ändern des aktuellen Controls erfolgt über den Tab oben im Container, den Sie anklicken können:

Die Titel werden standardmäßig aus den Namen der Nodes generiert (sie können jedoch über die TabContainer-API überschrieben werden).

Einstellungen wie die Platzierung der Tabs und die StyleBox können in den TabContainer Theme-Überschreibungen geändert werden.

Split-Container

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:

Panel-Container

Ein Container, der eine StyleBox zeichnet und dann die Child-Nodes so erweitert, dass sie den gesamten Bereich abdecken (über PanelContainer, unter Berücksichtigung der StyleBox-Seitenränder). Er respektiert sowohl die horizontalen als auch die vertikalen Größenoptionen.

This container is useful as a top-level control, or just to add custom backgrounds to sections of a layout.

FoldableContainer

A container that can be expanded/collapsed (via FoldableContainer). Child controls are hidden when it is collapsed.

Scroll-Container

Accepts a single child node. If the child node is bigger than the container, scrollbars will be added to allow panning the node around (via ScrollContainer). Both vertical and horizontal size options are respected, and the behavior can be turned on or off per axis in the properties.

Das Mausrad und Touch Drag (wenn Touch verfügbar ist) sind ebenfalls gültige Methoden, um das Child-Control zu verschieben.

Wie im obigen Beispiel ist eine der häufigsten Arten, diesen Container gemeinsam mit einem VBoxContainer als dessen Child-Node zu verwenden.

AspectRatioContainer

Ein Containertyp, der seine Child-Controls so anordnet, dass ihre Proportionen automatisch erhalten bleiben, wenn die Größe des Containers geändert wird. (über AspectRatioContainer). Es hat mehrere Stretch-Modi, die Optionen für die Anpassung der Größen der Child-Controls in Bezug auf den Container bieten: "fill", "width control height", "height control width" und "cover".

It is useful when you have a container that needs to be dynamic and responsive to different screen sizes, and you want the child elements to scale proportionally without losing their intended shapes.

FlowContainer

FlowContainer is a container that arranges its child controls either horizontally or vertically (via HFlowContainer and via VFlowContainer). When the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.

It is useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.

CenterContainer

CenterContainer is a container that automatically keeps all of its child controls centered within it at their minimum size. It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning (via CenterContainer).

SubViewportContainer

Dies ist ein spezielles Control, das nur einen einzigen Viewport-Node als Child-Node akzeptiert und ihn wie ein Bild anzeigt (über SubViewportContainer).

Erstellen benutzerdefinierter Container

It is possible to create a custom container using a script. Here is an example of a container that fits children to its 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(), 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();
    }
}