SuperAPI AI 工具集

godot-ui-containers

前端与建站

查看项目

更新于 10-15 18:28

技能介绍

用途

本技能面向 Godot 引擎的 UI 布局开发,提供使用 Container 节点构建响应式界面的专家级蓝图。适用于构建自适应界面或实现响应式菜单的场景。

主要能力

技能以决策树形式将需求映射到容器类型与必读脚本,例如:断点外壳/全屏自适应根节点使用 Margin + Box 容器;随宽度变化的固定列使用 GridContainer;换行标签/芯片使用 HFlowContainer;数千行滚动使用虚拟池;日志/聊天自动滚动使用 ScrollContainer;UI 中的 3D 角色/物品预览使用 SubViewportContainer;深层嵌套导致布局峰值时改用锚点/偏移;径向/轮盘菜单使用自定义 Container。

同时提供按场景的「应加载 / 不应加载」脚本对照表,避免加载无关脚本。

可用脚本

  • virtual_list.gd:虚拟列表池化,回收小型 Control 池 + 间隔高度,实现 O(1) 的 ScrollContainer 行渲染。
  • responsive_layout_builder.gd:基于断点的响应式布局容器构建器。
  • responsive_grid.gd:根据可用宽度自动调整列数的 GridContainer。
  • responsive_inventory_grid.gd:基于可用宽度与物品最小尺寸的动态网格列逻辑。
  • terminal_autoscroll.gd:安全的 ScrollContainer 管理,处理添加日志或聊天时的「一帧延迟」常见问题。
  • viewport_3d_preview.gd:高性能的 UI 内 3D 设置,使用 stretch_shrink 与 transparent_bg 实现角色预览。
  • dynamic_tab_manager.gd:动态标签页生成、自定义标题与关闭逻辑的模式。
  • responsive_tag_cloud.gd:使用 HFlowContainer 的换行列表,适用于标签云与响应式菜单。
  • performance_anchor_layout.gd:优化架构,用轻量 Anchor 与 Offset 逻辑替代深层容器嵌套。
  • custom_radial_container.gd:通过 NOTIFICATION_SORT_CHILDREN 实现径向/圆形布局的自定义容器逻辑。
  • animated_container_shuffle.gd:交互式 UI 列表的动态同级重排与动画逻辑。
  • aspect_ratio_mini_map.gd:使用 AspectRatioContainer 在窗口缩放时强制严格宽高比(如 1:1、16:9)。
  • container_size_flags_pro.gd:使用 SIZE_EXPAND_FILL 与 stretch_ratio 的加权布局进阶尺寸逻辑。

使用方式

技能以决策树和场景对照表引导选择容器类型与脚本,并给出专家布局模式示例,包括:使用 HSplitContainer 的动态分屏容器、基于 virtual_list.gd(setup_pool + set_data)的虚拟列表 ScrollContainer、使用 AspectRatioContainer 锁定比例的响应式卡片。尺寸标志配方指向 container_size_flags_pro.gd。深层配方(锚点、标志、间隔)见 references/container-layout-recipes.md。

容器使用禁忌(节选)

  • 不要忽略 mouse_filter,覆盖层容器应设为 PASS 或 IGNORE,避免阻挡下层按钮点击。
  • 不要在 ScrollContainer 中实例化数千节点,应使用虚拟列表池化。
  • 不要为响应式网格手动计算卡片尺寸,应使用 AspectRatioContainer 锁定比例。
  • 不要在 Container 中手动设置子节点 position 或 size,容器会在 queue_sort() 时覆盖子节点变换,应改用 custom_minimum_size 或 size_flags。
  • 不要忘记为扩展设置 size_flags,默认是 SIZE_SHRINK_BEGIN。
  • 不要在不设置 columns 的情况下使用 GridContainer,默认列为 1;响应式换行应使用 HFlowContainer。
  • 不要嵌套容器过深(10 层以上),会造成布局重算峰值。
  • 不要跳过 separation 覆盖,默认主题间隔通常过紧。
  • 不要在无最小尺寸的情况下使用 ScrollContainer。
  • 不要在添加新子节点的同一帧滚动到该子节点,必须先 await get_tree().process_frame。
  • 不要缩放 SubViewportContainer 来改变尺寸,会扭曲渲染内容,应调整边距或使用 stretch 与 stretch_shrink。
  • 不要对分层 Viewport 保留默认 mouse_filter。
  • 不要用 GridContainer 做响应式换行。
  • 不要在容器内直接动画 position,应对 custom_minimum_size 使用 Tween。

适用场景

响应式菜单、库存/商店网格、标签云/芯片换行、数千行日志/聊天、3D 物品/角色预览、径向/轮盘菜单、深层嵌套性能优化等。

限制

本资料未提供收费、价格、平台支持范围等信息。具体 API 行为以 Godot 官方文档为准。