7.1 Control 节点、容器与主题样式

7.1 Control 节点、容器与主题样式

本节摘要：控制节点是界面世界的根，它的坐标不问像素问锚点——用相对关系描述位置，分辨率适配自动成立。容器家族替你解排版约束：水平垂直堆叠、网格、边距、居中各司其职。样式盒是控件外观的绘制单元，主题是样式与字体的继承体系。本节合并讲解控制节点体系与主题样式两大块，给出从骨架到换肤的完整路径。

先立一个反直觉的认知：界面布局做错了，症状常在几个月后才发作——开发时一切都好的界面，玩家用超宽屏一打开就支离破碎。根源几乎千篇一律：布局是按"当前窗口的绝对坐标"摆的，而不是按"相对关系"描述的。控制节点体系的全部设计，就是把"描述关系"变成唯一自然的写法。

锚点：用相对关系说话

每个控制节点有四个锚点与四个偏移，分别对应自己的左上右下四条边。锚点是比例值（零到一），表示"我的这条边钉在父容器的百分之几处"；偏移是钉住之后再加的固定像素。一句"钉在右上角"胜过一万行坐标计算：

血条钉左上：  锚点全部贴左上（比例为零），右边偏移加宽度
准星钉中央：  四锚点收拢到中心（比例各半），四偏移对称外扩
血条背景钉底：左右锚点拉开贴满，底锚点贴底，顶锚点随内容高度
​

窗口任意缩放，钉住的关系永不变——这就是"约束优先于坐标"的兑现。有一个例外要单独记：需要像素级的 2D 游戏内界面（比如跟世界坐标走的名牌）不该用控制节点，画布项才是它的地盘；控制节点属于屏幕层。

容器家族：排版约束求解器

容器是控制节点的子类，职责是替子控件解布局方程。常用七种，各解一类题：

容器使用的核心心法：大小与位置交给容器管，自己只声明"我要多大"。子控件通过尺寸提示（最小、期望、可扩展标志）向容器表达意愿，容器据此分配空间。初学最常见的挣扎——"容器里的控件怎么摆都不听话"——八成是想直接改子控件坐标，被容器每帧改回来。正确动作是调容器的间距、对齐与子控件的尺寸提示。

# 代码动态装背包格子的正确姿势
func build_grid(item_count: int) -> void:
    for i in item_count:
        var slot := SlotScene.instantiate()
        %Grid.add_child(slot)            # 加进网格容器
        # 不设坐标！位置由网格容器分配
​

⚠️ 常见坑：容器套容器嵌套过深，间距层层叠加，最后没人说得清一个像素差从哪来。纪律是嵌套不超过三层，间距常量集中在主题或全局配置里管理。

样式盒：控件外观的绘制单元

控件怎么画自己？答案是样式盒——一段可复用的绘制描述。几种常用类型：扁平盒（纯色加圆角加描边）、纹理盒（按九宫格拉伸的图片，边角不糊）、线框盒（只画边）。任何控件的背景、悬停态、按下态都是样式盒，替换它就换了皮肤。

# 运行时换血条底色：改的就是样式盒
func set_danger_skin() -> void:
    var sb := StyleBoxFlat.new()
    sb.bg_color = Color(0.55, 0.12, 0.1)
    sb.corner_radius_top_left = 6
    sb.corner_radius_top_right = 6
    add_theme_stylebox_override(&"panel", sb)   # 覆盖面板槽位
​

九宫格纹理盒值得多讲一句：它把一张图切成九块，四角不缩放、边单向拉伸、中心双向拉伸——按钮与对话框的皮肤因此能适配任意尺寸而不糊角。游戏界面的"美术质感"大半来自贴图样式盒，扁平盒则是原型期的快枪。

主题：视觉的继承与覆盖

主题是样式盒、字体、颜色、图标的集合容器，构成一棵继承树：控件查自己的覆盖，没有则问父级主题，一路问到默认主题。这棵树让"全局换肤"成为一次操作——把做好的主题挂到界面根节点，整棵界面树继承新视觉；局部差异用覆盖表达，不改全局。

工程实践的三层结构：项目主题定基调（主色、字体、按钮样式），场景主题做局部风格（矿井界面的暗色系），实例覆盖处理个案（这一枚警示按钮红色）。三层各司其职，谁也不越权。换肤需求（暗色模式、节日主题）来临时，只是多备一套项目主题的事。

继承链的运行时查询值得再强调一遍，因为它是"改了不生效"类问题的答案：一个按钮的样式，先看自身覆盖，再看最近祖先挂的主题，最后落到默认主题。你把新主题挂在界面根上，界面的按钮全变新样式；但若有控件自己带覆盖，它纹丝不动——"怎么就它没变"，查覆盖。同理，给单个控件加覆盖只影响它自己与它的子树，不影响兄弟。这套就近原则与第 3 章场景树的作用域传播一脉相承，学会一个就懂了另一个。

# 主题查询的就近链：三层各管一段
# 1 项目主题挂根：全局基调
# 2 场景主题挂矿井界面：局部暗色
# 3 实例覆盖挂警示按钮：单点红色
%WarnButton.add_theme_color_override(&"font_color", Color(0.9, 0.2, 0.15))
​

💡 一条心法：界面开发的正确顺序是"先用扁平盒与默认字体把结构跑通，最后统一上主题"。反过来（先做美术再摆结构）必然返工——结构一变，贴图全重切。

图 1 界面三层体系全景

本节要点回顾

• 描述关系不报坐标：锚点钉相对关系，分辨率适配自动成立；世界坐标内的界面归画布项
• 容器是约束求解器：位置大小交给容器，子控件只声明尺寸意愿；嵌套不超三层
• 样式盒是绘制单元：扁平盒原型、九宫格贴图皮肤；每交互态一个盒
• 主题是继承树：项目定基调、场景做局部、覆盖处理个案；换肤是一套主题的事
• 顺序铁律：结构跑通再上视觉，先美术后结构必返工

骨架与皮肤齐了，下一节接上玩家的手：输入映射与多设备适配。