godotengine/godot-docs
1
0
Fork 0
mirror of https://github.com/godotengine/godot-docs.git synced 2026-01-04 14:11:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10934 from ProgrammerOnCoffee/update-gui-containers

Browse Source 
Update the Using Containers tutorial
This commit is contained in:
ProgrammerOnCoffee
2025-06-01 17:06:18 -04:00
committed by GitHub
parent 813168b8c2
commit e4b27c12a5
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
tutorials/ui/gui_containers.rst
View File

@@ -1,5 +1,3 @@
:article_outdated: True
.. _doc_gui_containers:
Using Containers
@@ -141,12 +139,19 @@ It respects both the horizontal and vertical sizing options.
.. image:: img/containers_panel.png
This container is useful as top-level, or just to add custom backgrounds to sections of a layout.
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 :ref:`FoldableContainer <class_FoldableContainer>`).
Child controls are hidden when it is collapsed.
ScrollContainer
~~~~~~~~~~~~~~~
Accepts a single child node. If this node is bigger than the container, scrollbars will be added
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 :ref:`ScrollContainer <class_ScrollContainer>`). Both
vertical and horizontal size options are respected, and the behavior can be turned on or off
per axis in the properties.
@@ -170,7 +175,7 @@ It has multiple stretch modes, providing options for adjusting the child control
.. image:: img/containers_aspectratio.webp
useful when you have a container that needs to be dynamic and responsive to different screen sizes,
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.
.. image:: img/containers_aspectratio_drag.webp
@@ -178,14 +183,14 @@ and you want the child elements to scale proportionally without losing their int
FlowContainer
~~~~~~~~~~~~~
FlowContainer is a container that arranges its child controls either horizontally or vertically,
FlowContainer is a container that arranges its child controls either horizontally or vertically
(via :ref:`HFlowContainer <class_HFlowContainer>` and via :ref:`VFlowContainer <class_VFlowContainer>`).
and when the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.
When the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.
.. image:: img/containers_hflow.webp
useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.
It is useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.
.. image:: img/containers_hflow_drag.webp
@@ -193,7 +198,7 @@ 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.
It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning
(via :ref:`CenterContainer <class_CenterContainer>`).
.. image:: img/containers_center.webp
@@ -210,7 +215,7 @@ Creating custom Containers
--------------------------
It is possible to create a custom container using a script.
Here is an example of a container that fits children to its rect size:
Here is an example of a container that fits children to its size:
.. tabs::
.. code-tab:: gdscript GDScript
@@ -222,7 +227,7 @@ Here is an example of a container that fits children to its rect size:
# Must re-sort the children
for c in get_children():
# Fit to own size
fit_child_in_rect(c, Rect2(Vector2(), rect_size))
fit_child_in_rect(c, Rect2(Vector2(), size))
func set_some_setting():
# Some setting changed, ask for children re-sort.
@@ -242,7 +247,7 @@ Here is an example of a container that fits children to its rect size:
foreach (Control c in GetChildren())
{
// Fit to own size
FitChildInRect(c, new Rect2(new Vector2(), RectSize));
FitChildInRect(c, new Rect2(new Vector2(), Size));
}
}
}