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),
                // center button
                margin: UiRect::all(Val::Auto),
                // horizontally center child text
                justify_content: JustifyContent::Center,
                // vertically center child text
                align_items: AlignItems::Center,
                ..default()
            },
            background_color: Color::RED.into(),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(TextBundle::from_section(
                "Button",
                TextStyle {
                    font_size: 40.0,
                    color: Color::rgb(0.9, 0.9, 0.9),
                    ..default()
                },
            ));
        });
}

使用bevy_ui_styled的相同示例

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

fn system(mut commands: Commands, asset_server: AssetServer) {
    commands
        .spawn(ButtonBundle {
            // This will return a Style component that is identical to the one above
            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 {
                    font_size: 40.0,
                    color: Color::rgb(0.9, 0.9, 0.9),
                    ..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。该模块的目标是提供一些基本颜色，以帮助您开始。

bevy版本支持