Bevy UI Builder

简单的UI构建库，是bevy_ui的简单包装，具有流畅的API设计。

警告

正在积极开发中，无法保证API的稳定性。

功能

• 构建bevy_ui的基本元素：节点、文本、图像、按钮
• 各种按钮，包括
  • 切换按钮
  • 在鼠标按钮释放时执行点击操作
• 各种绑定

基础

构建UI层次结构

在开始之前，你需要了解bevy_ui 4个基本UI元素

• 节点(NodeBundle)
• 图像(ImageBundle)
• 文本(TextBundle)
• 按钮(ButtonBundle)

UI构建库有相应的函数来构建整个UI

• node()
• image(handle_to_image)
• button()
• text(content)

// before start, add plugin first
.add_plugin(UiBuilderPlugin)

// usage
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // ...
    let mut b = UiBuilder::new(&mut commands, ());
    // create new node element
    b.node()
        // style modifier
        .with_style_modifier((StyleSize::FULL, StyleCenterChildren))
        .with_children(|b| {
            // create image element
            b.image(asset_server.load("image/file.png"));
            // create button element
            b.button()
                .with_children(|b| {
                    // create text element
                    b.text("text content");
                });
        });
    // ...
}

修改样式

• 使用Style组件和.with_style_modifiers(...)更改Style组件
• 使用.with_text_modifier(...)更改Text组件
• 使用.with_visibility(...)更改Visibility组件
• 使用.with_bg_color(...)更改BackgroundColor组件

注意：重复调用将覆盖之前的状态

有关更多StyleModifier和TextModifier，请参阅src/modifiers.rs

按钮

有一个示例按钮

切换按钮

• 切换按钮：.with_toggle(false)
• 切换按钮与切换组： .with_toggle(false).with_toggle_group("group_name")

点击动作

• .with_action_on_release()：在鼠标按钮释放时执行动作
• .with_mouse_button_mask(...)：对额外的鼠标右键/中键按钮做出反应，或可以禁用默认的左键鼠标

按钮视觉

每个按钮都有以下视觉状态：

• 正常
• 禁用
• 正常悬停
• 按下
• 按下悬停

库提供以下两种方式

• .with_image_button()：当视觉状态改变时更改 UiImage。
• .with_color_button()：当视觉状态改变时更改 BackgroundColor。

如果您需要更多的自定义样式，可以使用 Changed<> 订阅 ButtonVisualState 组件的变化，并处理您的样式。

数据绑定

• S：数据源，组件
• T：修改目标，组件
• 源实体：具有数据源组件 S
• 目标实体：具有目标组件 T

兼容的 bevy 版本

类似项目

此库受到以下库的启发

• https://github.com/Anti-Alias/bevy_ui_dsl
• https://github.com/TheRawMeatball/ui4

许可证

MIT OR Apache-2.0