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.

使用容器

Anchors are an efficient way to handle different aspect ratios for basic multiple resolution handling in GUIs.

對於更複雜的使用者介面, 它們可能會變得難以使用.

這通常是遊戲的情況下, 如角色扮演類, 線上聊天, 大富翁類或模擬類遊戲. 另一個需要更高級佈局功能的常見情況是遊戲內工具(或者僅僅是工具).

這些情況需要一個更強大的類似作業系統的使用者介面,具有先進的佈局和格式。用 Container 會更方便。

容器佈局

容器提供了巨大的佈局能力(例如,Godot編輯器的使用者介面就是完全使用它們完成的):

../../_images/godot_containers.png

當使用 Container 衍生的節點時,所有作為子項的 Control 節點都會放棄自我定位能力。這意味著*容器*將控制它們的位置,任何手動更改這些節點的嘗試,都將在它們的父節點下一次調整大小時被忽略或失效。

同樣,調整 Container 衍生節點的大小時,它的所有子節點都將根據它重新定位,其行為基於所用的容器型別:

../../_images/container_example.gif

HBoxContainer 調整子按鈕大小的例子。

容器的真正優勢在於它們可以巢狀(作為節點), 允許建立非常複雜的佈局, 調整毫不費力.

大小選項

當向容器新增節點時, 容器對待每個子元素的方式, 主要取決於它們的 size flags尺寸標記 . 通過檢查 容器 的子控制項, 可以找到這些標記.

../../_images/container_sizing_options.webp

尺寸標記獨立於垂直和水平尺寸, 並不是所有容器都使用它們(但大多數容器都使用):

  • Fill填充 : 確保控制項 fills填充 容器內指定的區域. 無論控制項是否 expands擴充 (見下面), 當此選項被選中時(預設情況), 只 填充 指定區域.

  • Expand擴充 : 試圖在父容器中盡可能多地使用空間(在每個軸中). 不展開的控制項會被展開的控制項推開. 在擴充的控制項之間, 它們相互佔用的空間大小由 Ratio 決定(見下文).

  • Shrink Center收縮中心 當擴充時(如果不填充), 儘量保持在擴充區域的中心(預設情況下, 它仍然位於左側或頂部).

  • Shrink Center收縮中心 當擴充時(如果不填充), 儘量保持在擴充區域的中心(預設情況下, 它仍然位於左側或頂部).

  • Shrink Center收縮中心 當擴充時(如果不填充), 儘量保持在擴充區域的中心(預設情況下, 它仍然位於左側或頂部).

  • Ratio比例 擴充控制項之間, 相互佔用可用空間的簡單比例. 一個比例為 "2" 的控制項, 將佔用比例為 "1" 控制項的兩倍可用空間.

建議使用這些標記和不同的容器進行試驗, 以便更好地瞭解它們是如何工作的.

容器型別

Godot提供了幾種開箱即用的容器型別, 因為它們有不同的用途:

盒式容器

將子控制項垂直或者水平排列(使用 HBoxContainerVBoxContainer )。而在相對方向上(比如水平容器的垂直方向),子節點會被擴充。

../../_images/containers_box.png

這些容器會用到設定了 Expand(擴充) 選項的子節點的 Ratio(比例) 屬性。

網格容器

將子控制項按照網格排列(使用 GridContainer ,必須指定列數),會同時用到垂直和水平擴充選項。

../../_images/containers_grid.png

邊距容器

將子節點擴充到該控制項的邊界(使用 MarginContainer ),會根據主題的設定來新增不同大小的邊距。

../../_images/containers_margin.png

同樣, 請記住, 邊距是一個 Theme 值, 所以它們需要從每個控制項的常數重寫部分進行編輯:

../../_images/containers_margin_constants.png

分頁容器

允許你將多個子控制項堆疊在一起(使用 TabContainer ),只會顯示 目前 控制項。

../../_images/containers_tab.png

點擊容器頂部的分頁可以更改 目前 控制項:

../../_images/containers_tab_click.gif

標題預設是根據節點名稱生成的(儘管可以通過 TabContainer 的 API 重寫)。

可以在 TabContainer 的主題覆蓋項中修改類似分頁位置和 StyleBox 等設定。

拆分容器

只接受單個或者兩個子控制項,會將它們相鄰放置,中間是分隔線(使用 HSplitContainerVSplitContainer ),會使用到水平和垂直選項以及 Ratio 屬性。

../../_images/containers_split.png

可以通過拖動分隔線來調整兩個子節點所占區域的大小:

../../_images/containers_split_drag.gif

PanelContainer

繪製 StyleBox 的簡單容器,會將子節點擴大到整個區域(使用 PanelContainer,會考慮 StyleBox 的邊距)。它同時考慮水平和垂直尺寸旗標。

../../_images/containers_panel.png

這個容器作為頂層非常有用, 或者只是為佈局各個部分新增自訂背景.

ScrollContainer

接受一個單獨的子節點. 如果這個節點比容器大, 將新增捲軸以允許移動節點(通過 ScrollContainer)。垂直和水平尺寸旗標都會被遵守,該行為可以在屬性中的每個軸上打開或關閉.

../../_images/containers_scroll.png

滑鼠滾輪和觸摸拖動(當觸摸可用時)也是平移子控制項的有效方法.

../../_images/containers_center_pan.gif

正如上面的例子中所展示的,使用此容器最常見的方法之一,是將 VBoxContainer 作為子容器一起使用。

AspectRatioContainer

A container type that arranges its child controls in a way that preserves their proportions automatically when the container is resized. (via AspectRatioContainer). It has multiple stretch modes, providing options for adjusting the child controls' sizes concerning the container: "fill," "width control height," "height control width," and "cover."

../../_images/containers_aspectratio.webp

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.

../../_images/containers_aspectratio_drag.webp

FlowContainer

FlowContainer is a container that arranges its child controls either horizontally or vertically, (via HFlowContainer and via 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.

../../_images/containers_hflow.webp

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

../../_images/containers_hflow_drag.webp

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

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

建立內容

這是一個特殊的控制項,只接受單個 Viewport 節點作為子節點,並且會把它作為圖片顯示(使用 ViewportContainer)。

建立內容

可以使用腳本輕鬆地建立自訂容器。下面是一個簡單容器的例子,它會根據自身的矩形尺寸調整子節點:

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