【Godot4.4】专用类网页布局容器

概述

在之前的文章中提到过使用MarginContainer和CenterContainer、VBoxContainer等嵌套实现类似网页的布局效果。

文末也提到，其实可以通过自定义容器来简化这一操作。

水平居中布局函数

• 布局的本质是计算Rect2
• 针对一种布局可以编写一个布局函数

我定义的水平居中布局函数HCenter()如下：

class_name Layouts


# 水平定宽居中布局
static func HCenter(
	rect:Rect2,           # 外框矩形
	width:float,          # 固定宽度
	padding_top:=0.0,     # 上边距
	padding_bottom:=0.0,  # 下边距
) -> Rect2: 
	var pos = Vector2(rect.size.x - width,0)/2.0 + Vector2(0,padding_top)
	var size = Vector2(width,rect.size.y - padding_top - padding_bottom)
	return Rect2(pos,size)

为了方便调用，以静态函数形式放入函数库Layouts。

水平居中容器

基于水平居中布局函数HCenter()，编写了水平居中容器HCenterContainer。

# 水平居中布局容器
# 居中区域固定宽度
# 2025.03.04
@tool
class_name HCenterContainer
extends Container

# 居中区域的宽度
@export var width:float = 500.0:
	set(val):
		width = val
		queue_sort()

# 顶部边距
@export var padding_top:float = 0.0:
	set(val):
		padding_top = val
		queue_sort()

# 底部边距
@export var padding_bottom:float = 0.0:
	set(val):
		padding_bottom = val
		queue_sort()

func _notification(what: int) -> void:
	var rect = get_rect() * get_transform()
	var rect2 = Layouts.HCenter(rect,width,padding_top,padding_bottom) # 获取布局
	match what:
		NOTIFICATION_SORT_CHILDREN:
			fit_child_in_rect(get_children()[0],rect2)
			

func _get_minimum_size() -> Vector2:
	var h = get_child(0).get_rect().size.y + padding_top + padding_bottom
	return Vector2(0,h)

测试效果：

只需要为其添加一个VBoxContainer就可以实现网页内容排布的效果了。

类网页布局容器

在HCenterContainer基础上，添加背景颜色和背景图设定的相关属性和绘制功能，就可以完成类似网页效果的容器。

# 类网页布局容器
# 居中区域固定宽度
# 2025.03.04
@tool
class_name WebLikeContainer
extends HCenterContainer

# 页面背景色
@export var bg_color:=Color.WHITE:
	set(val):
		bg_color = val
		queue_redraw()

# 页面背图片
@export var bg_image:Texture2D:
	set(val):
		bg_image = val
		queue_redraw()

# 页面背图片
@export var bg_modulate:=Color.WHITE:
	set(val):
		bg_modulate = val
		queue_redraw()

func _draw() -> void:
	var rect = get_rect() * get_transform()
	draw_rect(rect,bg_color)
	draw_texture_rect(bg_image,rect,false,bg_modulate)

实际应用效果

用在还在设计中自用的Godot项目管理器“狗蛋管家”的效果：