Skip to content

UI 交互与控件

第 28 章搭好了 UI 布局的骨架——Node、Flexbox、Grid、文本与图片。但那些界面是死的:按钮不会按,滑条不会拖,复选框不会勾。本章给它们装上神经系统。

Bevy 的 UI 交互分两条路:

  • Interaction 枚举bevy_ui 内置)——最简单的方式,给 Node 加一个 Button 标记组件,引擎自动维护 Interaction::Pressed / Hovered / None 三种状态。适合快速原型。
  • bevy_ui_widgets 控件库(实验性)——无样式的 headless 控件:ButtonSliderCheckboxScrollbarRadioGroup。状态通过 Observer 事件驱动,不自动修改自身——你决定何时更新、如何更新。适合需要精确控制的正式项目。

两条路不是互斥的:Interaction 枚举仍然存在于每个 UI Node 上,而 bevy_ui_widgetsButton 组件在底层也利用了 picking 系统的 Pressed / Hovered 状态。本章先教简单的 Interaction 路线,再切到控件库。

本章还会覆盖滚动(Overflow::scroll + ScrollPosition)、UI 章节的实战项目——一个完整的设置面板。UI 自定义材质(UiMaterial)作为扩展话题简要介绍。

配套 crate 是 code/ch29-ui-widgetsCargo.toml 需要启用实验性控件特性:

toml
[package]
name = "ch29-ui-widgets"
edition.workspace = true
publish.workspace = true

[dependencies]
bevy = { workspace = true, features = ["bevy_ui_widgets"] }

控件库在 bevy::ui_widgets 模块下,使用前需要注册插件:

rust
app.add_plugins((DefaultPlugins, UiWidgetsPlugins));

UiWidgetsPlugins 是一个 PluginGroup,内部包含 ButtonPluginSliderPluginCheckboxPluginScrollbarPlugin 等。也可以单独引入某个插件。

开始。