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

Використання контейнерів

Anchors є ефективним способом обробки різних пропорцій для базової обробки кількох роздільних здатностей у графічних інтерфейсах користувача.

Для більш складних користувальницьких інтерфейсів вони можуть стати складнішими у використанні.

Це часто стосується ігор, таких як RPG, онлайн-чати, магнати або симулятори. Ще один поширений випадок, коли можуть знадобитися більш розширені функції компонування, це інструменти в грі (або просто інструменти).

Усі ці ситуації вимагають більш потужного користувальницького інтерфейсу, схожого на ОС, із вдосконаленим макетом і форматуванням. Для цього більш корисними є Containers.

Макет контейнера

Контейнери забезпечують величезну потужність макета (як приклад, інтерфейс користувача редактора Godot повністю створений з їх використанням):

Коли використовується похідний вузол Container, усі дочірні вузли Control втрачають власну здатність позиціонування. Це означає, що Контейнер контролюватиме їх розташування, і будь-яка спроба вручну змінити ці вузли буде проігнорована або визнана недійсною наступного разу, коли їхній батьківський вузол буде змінено розмір.

Подібним чином, коли змінюється розмір похідного вузла Container, усі його дочірні елементи будуть змінено відповідно до нього, поведінка буде залежати від типу використовуваного контейнера:

Приклад зміни розміру дочірніх кнопок HBoxContainer.

Справжня сила контейнерів полягає в тому, що вони можуть бути вкладеними (як вузли), дозволяючи створювати дуже складні макети, які легко змінюють розмір.

Варіанти розмірів

Під час додавання вузла до контейнера те, як контейнер обробляє кожного дочірнього елемента, головним чином залежить від його параметрів розміру контейнера. Ці параметри можна знайти, перевіривши макет будь-якого Control, який є дочірнім елементом Container.

Параметри розміру незалежні для вертикального та горизонтального розміру, і не всі контейнери використовують їх (але більшість використовує):

Заповнити: Забезпечує заповнення елементом керування визначеної області в контейнері. Незалежно від того, розгортається елемент керування чи ні (див. нижче), він заповнить визначену область лише тоді, коли ця функція увімкнена (за замовчуванням).
Розгорнути: намагається використати якомога більше місця в батьківському контейнері (на кожній осі). Елементи керування, які не розширюються, будуть відсунуті тими, які розширюються. Обсяг простору, який вони займають один від одного, визначається коефіцієнтом розтягування (див. нижче). Цей параметр доступний лише тоді, коли батьківський контейнер має правильний тип, наприклад HBoxContainer має цей параметр для горизонтального розміру.
Початок зменшення Під час розширення намагайтеся залишатися ліворуч або вгорі розширеної області.
Зменшити центр Під час розширення намагайтеся залишатися в центрі розширеної області.
Shrink End Під час розширення намагайтеся залишатися праворуч або внизу розширеної області.
Коефіцієнт розтягування: співвідношення того, скільки розширених елементів керування займають доступний простір відносно один одного. Елемент керування з «2» займатиме вдвічі більше вільного місця, ніж елемент із «1».

Рекомендується поекспериментувати з цими прапорцями та різними контейнерами, щоб краще зрозуміти, як вони працюють.

Типи контейнерів

Godot пропонує кілька типів контейнерів, оскільки вони служать різним цілям:

Box containers

Розташовує дочірні елементи керування вертикально або горизонтально (через HBoxContainer і VBoxContainer). У протилежному напрямку (як у вертикальному для горизонтального контейнера) він просто розширює дочірні елементи.

Ці контейнери використовують властивість Stretch Ratio для дітей із встановленим прапорцем Expand.

Сітковий контейнер

Упорядковує дочірні елементи керування в макеті сітки (через GridContainer, необхідно вказати кількість стовпців). Використовує як вертикальні, так і горизонтальні прапорці розгортання.

Маржинальний контейнер

Дочірні елементи керування розширюються до меж цього елемента керування (через MarginContainer). Залежно від конфігурації теми до полів буде додано відступ.

Знову ж таки, майте на увазі, що поля є значенням Theme, тому їх потрібно редагувати в розділі заміни констант кожного елемента керування:

Контейнер вкладок

Дозволяє розміщувати кілька дочірніх елементів керування, розташованих один на одному (через TabContainer), причому видно лише поточний.

Зміна поточного виконується за допомогою вкладок, розташованих у верхній частині контейнера, натиснувши:

За замовчуванням заголовки генеруються з імен вузлів (хоча їх можна змінити за допомогою API TabContainer).

Такі параметри, як розміщення вкладок і StyleBox, можна змінити в заміщеннях теми TabContainer.

Розділений контейнер

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

Контейнер, який малює StyleBox, а потім розгортає дочірні елементи, щоб охопити всю його область (через PanelContainer, дотримуючись полів StyleBox). Він поважає як горизонтальні, так і вертикальні параметри розміру.

Цей контейнер корисний як елемент керування верхнього рівня або просто для додавання власних фонів до розділів макета.

FoldableContainer

Контейнер, який можна розгортати/згортати (через FoldableContainer). Дочірні елементи керування приховані, коли він згортається.

Scroll Container

Приймає один дочірній вузол. Якщо дочірній вузол більший за контейнер, будуть додані смуги прокручування, щоб дозволити панорамування вузла (через ScrollContainer). Враховуються як вертикальні, так і горизонтальні параметри розміру, і цю поведінку можна вмикати або вимикати для кожної осі у властивостях.

Колесо миші та перетягування дотиком (якщо доступний дотик) також є дійсними способами панорамування дочірнього елемента керування.

Як у наведеному вище прикладі, один із найпоширеніших способів використання цього контейнера — разом із VBoxContainer як дочірнім.

AspectRatio Container

Тип контейнера, який упорядковує дочірні елементи керування таким чином, що автоматично зберігає їхні пропорції під час зміни розміру контейнера. (через AspectRatioContainer). Він має кілька режимів розтягування, надаючи параметри для налаштування розмірів дочірніх елементів керування щодо контейнера: «заповнення», «висота керування шириною», «ширина керування висотою» та «кришка»

Це корисно, коли у вас є контейнер, який має бути динамічним та адаптуватися до різних розмірів екрана, і ви хочете, щоб дочірні елементи масштабувалися пропорційно, не втрачаючи своїх запланованих форм.

Flow Container

FlowContainer — це контейнер, який розташовує свої дочірні елементи керування горизонтально або вертикально (через HFlowContainer та через VFlowContainer). Коли доступний простір закінчується, він переносить дочірні елементи на наступний рядок або стовпець, подібно до того, як текст переноситься в книзі.

Це корисно для створення гнучких макетів, де дочірні елементи керування автоматично підлаштовуються під доступний простір без перекриття.

Center Container

CenterContainer – це контейнер, який автоматично зберігає всі свої дочірні елементи керування по центру всередині нього з мінімальним розміром. Він гарантує, що дочірні елементи керування завжди вирівняні по центру, що спрощує створення центрованих макетів без ручного позиціонування (за допомогою CenterContainer).

SubViewportContainer

Це спеціальний елемент керування, який прийматиме лише один вузол Viewport як дочірній і відображатиме його так, ніби це зображення (через SubViewportContainer).

Створення спеціальних контейнерів

Можна створити власний контейнер за допомогою скрипта. Ось приклад контейнера, який підлаштовує дочірні елементи під свій розмір:

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