容器巡礼

同样的四个方块交给四种容器。在 Godot 里做布局,就是选谁来安排子节点。

上方的编辑器正在运行这个项目。改一行代码,它就会重新加载。

用到的 Godot 类

VBoxContainerHBoxContainerGridContainerCenterContainer

代码

scripts/main.gd
extends Node

const COLORS: Array = ['#8da5f3', '#8eef97', '#fc7f7f', '#f3d48d']


func _ready() -> void:
	var row: HBoxContainer = _root()

	row.add_child(_demo('VBoxContainer', VBoxContainer.new()))
	row.add_child(_demo('HBoxContainer', HBoxContainer.new()))
	row.add_child(_demo('GridContainer', _grid()))
	row.add_child(_demo('CenterContainer', CenterContainer.new()))

	print('same four boxes, four containers deciding where they go')


func _demo(title: String, container: Container) -> Control:
	var column: VBoxContainer = VBoxContainer.new()
	column.size_flags_horizontal = Control.SIZE_EXPAND_FILL
	column.add_theme_constant_override('separation', 10)

	var label: Label = Label.new()
	label.text = title
	label.add_theme_color_override('font_color', Color('#999999'))
	column.add_child(label)

	var panel: PanelContainer = PanelContainer.new()
	panel.size_flags_vertical = Control.SIZE_EXPAND_FILL
	panel.add_theme_stylebox_override('panel', _panel_style())
	column.add_child(panel)

	container.size_flags_horizontal = Control.SIZE_EXPAND_FILL
	container.size_flags_vertical = Control.SIZE_EXPAND_FILL
	panel.add_child(container)

	for i in COLORS.size():
		container.add_child(_box(Color(COLORS[i])))

	return column


func _box(color: Color) -> Control:
	var box: ColorRect = ColorRect.new()
	box.color = color
	box.custom_minimum_size = Vector2(46, 46)

	return box


func _grid() -> GridContainer:
	var grid: GridContainer = GridContainer.new()
	grid.columns = 2

	return grid


func _panel_style() -> StyleBoxFlat:
	var style: StyleBoxFlat = StyleBoxFlat.new()
	style.bg_color = Color('#1c1b1b')
	style.set_corner_radius_all(10)
	style.set_content_margin_all(12)

	return style


func _root() -> HBoxContainer:
	var background: ColorRect = ColorRect.new()
	background.color = Color('#12141a')
	add_child(background)
	background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	var margin: MarginContainer = MarginContainer.new()

	for side in ['margin_left', 'margin_right', 'margin_top', 'margin_bottom']:
		margin.add_theme_constant_override(side, 40)

	add_child(margin)
	margin.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	var row: HBoxContainer = HBoxContainer.new()
	row.add_theme_constant_override('separation', 20)
	margin.add_child(row)

	return row

更多界面示例