【Godot4.4】模拟类似网页的布局

概述

最近瞎搞一些布局的事情，其中需要实现类似网页的布局，也就是水平居中，且中间内容区域固定宽度的形式。最终通过容器的嵌套，实现了效果，想着记录一下思路。

实现

单独用MarginContainer或CenterContainer，以及两者配合都无法完成要求的布局。

CenterContainer

页面内容居中肯定要用到CenterContainer，但是它的效果是在整个容器内居中其子元素。也就是水平和垂直都居中。垂直方向的居中是我们不想要的。

抵消垂直居中

好在通过实验发现，只需要在CenterContainer外添加一个VBoxContainer就可以让其在顶部排列，实现抵消其垂直方向居中的效果。

页面内容排布

在CenterContainer内添加加一个VBoxContainer，用于从上到下，排布实际的页面内容。

背景色或图片设置

通过在最外层的PanelContainer上添加StyleBox，可以实现为页面添加背景色或背景图片。

为页面添加边距

通过在外层VBoxContainer外包裹一个MarginContainer可以设置额外的边距。

当然在最外层PanelContainer上设置StyleBox后设定内容边距也是可以的。

此时，容器的嵌套结构以及其作用如下：

PanelContainer // 页面背景颜色或图片 MarginContainer // 模拟body的margin VBoxContainer // 抵消CenterContainer在垂直方向的居中 CenterContainer // 内容的居中 VBoxContainer // 内容的上下排布 设定最小宽度 实现啊背景颜色+背景图

因为单个PanelContainer要么通过StyleBoxFlat设定背景色，要么通过StyleBoxTexture设定背景图，两者无法兼得。解决办法也很简单，如果要同时实现背景颜色和半透明背景图片，可以再PanelContainer外再套PanelContainer，也就是：

PanelContainer // 页面背景颜色 PanelContainer // 页面背景图片 MarginContainer // 模拟body的margin VBoxContainer // 抵消CenterContainer在垂直方向的居中 CenterContainer // 内容的居中 VBoxContainer // 内容的上下排布 设定最小宽度

实际效果就是：

滚动条

页面内容的实际显示，需要加载再一个ScrollContainer中以显示滚动条。

此时的页面背景是随着页面而滚动的。

固定背景

如果要实验固定背景，则需要将ScrollContainer移动到如下的位置：

总结

Godot的容器就是为了UI布局存在的，很强大，但是对于某些特殊布局还是有些设置繁琐和力不从心。

另外Godot不支持WebBrowser，无法内嵌网页。

有时候又需要类似网页的显示和布局，所以只能自己搞。

此文所述的容器嵌套版本只是记录一下思路，后续会创建自定义容器简化和特化类网页排版的需求，敬请期待。