SuperAPI AI 工具集

bevy-ui-theming

前端与建站

查看项目

更新于 10-16 11:39

技能介绍

用途

当你希望许多 UI 节点共享同一套颜色或控件样式时,可以使用本技能。做法是把调色板放在一个资源(Resource)中,再把它复制到每个节点的颜色组件上,从而避免在每个生成系统里各写一遍颜色。适用于 Bevy 0.20+。

主要能力

  • 按节点设置颜色:BackgroundColor、BorderColor、BorderRadius、BoxShadow、BackgroundGradient。
  • 单一颜色来源:调色板(UiPalette)是唯一的颜色来源,一个系统负责把颜色组件从调色板写入节点。
  • 样式变体:例如面板形状相同、填充色不同的 Danger 标记;通过互斥查询,由一个系统统一写所有 BackgroundColor。
  • 主题切换:先用一个系统替换调色板,再让绘制系统复制它,通过链式(.chain())保证写入发生在替换之后,实现明暗主题切换(示例用 F5 键触发)。
  • 渐变表头:使用 LinearGradient 做线性渐变,色标位置自动均匀分布。

使用方式

资料给出的模式是:定义一个 UiPalette 资源(如 panel、border、shadow 字段),用 Commands 生成带 Panel 标记与 Node 组件的实体,并插入 BackgroundColor、BorderColor、BoxShadow 等组件。随后由一个系统从调色板资源读取颜色并写入节点:对不含 Danger 的面板用调色板颜色,对含 Danger 的面板用固定危险色。主题切换时,toggle_theme 系统先更新 ThemeKind 与 UiPalette,paint_panels 通过 .chain() 排在其后负责绘制。插件通过 insert_resource、init_resource 和 add_systems(Update, (toggle_theme, paint_panels).chain()) 注册。渐变表头则生成带 Node 与 BackgroundGradient 的实体,其中使用 LinearGradient::to_bottom 和 ColorStop::auto。

适用场景与限制

  • bevy::feathers 是面向编辑器和检查器的有样式控件集合,不应用它替代游戏 HUD 的调色板资源。
  • WindowTheme 只是操作系统窗口外观(Light 或 Dark),不会给 Node 实体重新着色,不应被当作 HUD 皮肤。
  • 不要让两个无序系统同时可变查询同一组件,除非用 .chain() 排序,否则调度会并行运行。
  • 不要在本技能中杜撰物理、导航、网络或 XR crate;只使用有文档的 Bevy crate 和模块。
  • 文档 URL 不要固定 /0.20.0/,链接保持 latest,0.20 目标只在正文中陈述一次。

参考

目标版本 Bevy 0.20+。相关技能包括先决条件 bevy-master、bevy-ecs-composition、bevy-ui-layout,以及互补技能 bevy-ui-text。