bevy_ui_styled

一个实用函数，允许您使用类似于 tailwindcss 的语法来定义 bevy_ui Style 组件。

如果您已经熟悉 tailwind 类，可以直接使用它们，并且可能会工作。只要您只使用与布局相关的类。并非所有功能都受支持，例如，bevy 目前仅支持 flexbox。如果您不熟悉 tailwind 但熟悉 bevy，我建议使用 tailwind 文档中的搜索功能，这将给出一个可能会工作的类。它实际上并不是 tailwind，而是基于相同的原理，所以很多东西可能不会按预期工作。

参考： https://tailwind.org.cn

基本思想是每个 Style 属性都有一个简单的简写值，可以用来组合更复杂的样式。参数是一个由空格分隔的简写值的字符串。

示例

这是 bevy 0.8 中的按钮示例

use bevy::prelude::*;

fn system(mut commands: Commands, asset_server: AssetServer) {
    commands
        .spawn(ButtonBundle {
            style: Style {
                width: Val::Px(150.0),
                height: Val::Px(65.0),
                margin: UiRect::all(Val::Auto),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            background_color: Color::RED.into(),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(TextBundle::from_section("Button", TextStyle::default()));
        });
}

使用 bevy_ui_styled 的相同示例

use bevy::prelude::*;
use bevy_ui_styled::styled;

fn system(mut commands: Commands, asset_server: AssetServer) {
    commands
        .spawn(ButtonBundle {
            style: styled!("w-150 h-65 m-auto justify-center items-center"),
            background_color: Color::RED.into(),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(TextBundle::from_section("Button", TextStyle::default()));
        });
}

Px, Percent, Auto

一些这些实用函数支持传递数值。数字被解析为 f32，因此您可以传递任何有效的 f32。如果您使用分数，它将计算值为百分比并将其限制在 100%。

use bevy_ui_styled::styled;

styled!("m-50"); // a 50px margin
styled!("m-1.5"); // a 1.5px margin
styled!("m-1/2"); // a 1/2 margin. Any fraction will be converted to a percentage and clamped to 100%
styled!("m-50%"); // a 50% margin
styled!("m-auto"); // a Val::Auto margin

警告：在 tailwind 中，小数值用于表示 em 值。由于 bevy 仅支持百分比和像素，我将其简单地评估为像素值。我不知道 bevy 如何解释 0.5 像素。

颜色

bevy_ui_styled 包含一个名为 colors 的模块，该模块包含了来自 Tailwind 的默认颜色。与 Tailwind 不同，这些颜色不容易自定义，但如果您想使用自定义颜色，可以使用 const CUSTOM_COLOR: Color。这个模块的目标是提供一些基本颜色，帮助您开始。

样式包

背景颜色

背景颜色不是 Style 结构的一部分，因此默认的 styled 宏无法控制它。如果您想能够修改背景颜色，则需要使用 styled_bundle 宏。

状态式样式

有时，您可能希望根据组件的状态来更改属性。默认的 styled 宏不能做到这一点，但您可以使用 styled_bundle。 styled_bundle 将返回一个包含不同样式的 Bundle，这些样式将根据交互状态自动切换。

Bevy 版本支持