Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

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):

../../_images/godot_containers.png

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:

../../_images/container_example.gif

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.

../../_images/container_sizing_options.webp

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.

../../_images/containers_box.png

Diese Container verwenden die Ratio-Property für Child-Nodes, bei denen das Expandieren-Flag gesetzt ist.

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.

../../_images/containers_grid.png

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.

../../_images/containers_margin.png

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:

../../_images/containers_margin_constants.png

Tab-Container

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

../../_images/containers_tab.png

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

../../_images/containers_tab_click.gif

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

Akzeptiert nur ein oder zwei Child-Controls und platziert sie dann mit einem Trenner nebeneinander (über HSplitContainer und VSplitContainer). Beachtet sowohl horizontale und vertikale Flags als auch Verhältnis.

../../_images/containers_split.png

Der Trenner kann herumgeschoben werden, um die Größenbeziehung zwischen beiden Child-Elementen zu ändern:

../../_images/containers_split_drag.gif

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.

../../_images/containers_panel.png

Dieser Container eignet sich für die oberste Ebene oder einfach nur, um Abschnitten eines Layouts benutzerdefinierte Hintergründe hinzuzufügen.

Scroll-Container

Akzeptiert einen einzelnen Child-Node. Wenn dieser Node größer als der Container ist, werden Scrollbars hinzugefügt, um den Node zu verschieben (über ScrollContainer). Sowohl vertikale als auch horizontale Größenoptionen werden beachtet, und das Verhalten kann in den Properys für jede Achse ein- oder ausgeschaltet werden.

../../_images/containers_scroll.png

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

../../_images/containers_center_pan.gif

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

../../_images/containers_aspectratio.webp

nützlich, wenn Sie einen Container haben, der dynamisch sein und auf verschiedene Bildschirmgrößen reagieren muss, und Sie möchten, dass die Child-Elemente proportional skaliert werden, ohne dass sie ihre beabsichtigte Form verlieren.

../../_images/containers_aspectratio_drag.webp

FlowContainer

FlowContainer ist ein Container, der seine Child-Controls entweder horizontal oder vertikal anordnet (über HFlowContainer und über VFlowContainer). Wenn der verfügbare Platz erschöpft ist, werden die Child-Controls in die nächste Zeile oder Spalte umgebrochen, ähnlich wie beim Umbrechen von Text in einem Buch.

../../_images/containers_hflow.webp

nützlich für die Erstellung flexibler Layouts, bei denen sich die Child-Controls automatisch an den verfügbaren Platz anpassen, ohne sich zu überlappen.

../../_images/containers_hflow_drag.webp

CenterContainer

CenterContainer ist ein Container, der alle seine Child-Controls automatisch in ihrer Mindestgröße zentriert hält. Er stellt sicher, dass die Child-Controls immer in der Mitte ausgerichtet sind, was es einfacher macht, zentrierte Layouts ohne manuelle Positionierung zu erstellen. (über CenterContainer).

../../_images/containers_center.webp ../../_images/containers_center_drag.webp

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

Es ist möglich, einen benutzerdefinierten Container mithilfe eines Skripts zu erstellen. Hier ist ein Beispiel eines Containers, der Child-Nodes an seine rechteckige Größe anpasst:

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