Support Warning
WebGPU is currently only supported on Chrome starting with version 113, and only on desktop. If they don't work on your configuration, you can check the WebGL2 examples here.Support for WebGPU in Bevy hasn't been released yet, this example has been compiled using the main branch.
//! Demonstrates how the `AlignItems` and `JustifyContent` properties can be composed to layout text.
use bevy::prelude::*;
const ALIGN_ITEMS_COLOR: Color = Color::rgb(1., 0.066, 0.349);
const JUSTIFY_CONTENT_COLOR: Color = Color::rgb(0.102, 0.522, 1.);
const MARGIN: Val = Val::Px(5.);
fn main() {
App::new()
.add_plugins(DefaultPlugins.set(WindowPlugin {
primary_window: Some(Window {
resolution: [870., 1066.].into(),
title: "Bevy Flex Layout Example".to_string(),
..Default::default()
}),
..Default::default()
}))
.add_systems(Startup, spawn_layout)
.run();
}
fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
let font = asset_server.load("fonts/FiraSans-Bold.ttf");
commands.spawn(Camera2dBundle::default());
commands
.spawn(NodeBundle {
style: Style {
// fill the entire window
width: Val::Percent(100.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center,
..Default::default()
},
background_color: BackgroundColor(Color::BLACK),
..Default::default()
})
.with_children(|builder| {
// spawn the key
builder
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
margin: UiRect::top(MARGIN),
..Default::default()
},
..Default::default()
})
.with_children(|builder| {
spawn_nested_text_bundle(
builder,
font.clone(),
ALIGN_ITEMS_COLOR,
UiRect::right(MARGIN),
"AlignItems",
);
spawn_nested_text_bundle(
builder,
font.clone(),
JUSTIFY_CONTENT_COLOR,
UiRect::default(),
"JustifyContent",
);
});
builder
.spawn(NodeBundle {
style: Style {
width: Val::Px(850.),
height: Val::Px(1020.),
flex_direction: FlexDirection::Column,
..Default::default()
},
..Default::default()
})
.with_children(|builder| {
// spawn one child node for each combination of `AlignItems` and `JustifyContent`
let justifications = [
JustifyContent::FlexStart,
JustifyContent::Center,
JustifyContent::FlexEnd,
JustifyContent::SpaceEvenly,
JustifyContent::SpaceAround,
JustifyContent::SpaceBetween,
];
let alignments = [
AlignItems::Baseline,
AlignItems::FlexStart,
AlignItems::Center,
AlignItems::FlexEnd,
AlignItems::Stretch,
];
for justify_content in justifications {
builder
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
..Default::default()
},
..Default::default()
})
.with_children(|builder| {
for align_items in alignments {
spawn_child_node(
builder,
font.clone(),
align_items,
justify_content,
);
}
});
}
});
});
}
fn spawn_child_node(
builder: &mut ChildBuilder,
font: Handle<Font>,
align_items: AlignItems,
justify_content: JustifyContent,
) {
builder
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
align_items,
justify_content,
width: Val::Px(160.),
height: Val::Px(160.),
margin: UiRect::all(MARGIN),
..Default::default()
},
background_color: BackgroundColor(Color::DARK_GRAY),
..Default::default()
})
.with_children(|builder| {
let labels = [
(format!("{align_items:?}"), ALIGN_ITEMS_COLOR, 0.),
(format!("{justify_content:?}"), JUSTIFY_CONTENT_COLOR, 3.),
];
for (text, color, top_margin) in labels {
// We nest the text within a parent node because margins and padding can't be directly applied to text nodes currently.
spawn_nested_text_bundle(
builder,
font.clone(),
color,
UiRect::top(Val::Px(top_margin)),
&text,
);
}
});
}
fn spawn_nested_text_bundle(
builder: &mut ChildBuilder,
font: Handle<Font>,
background_color: Color,
margin: UiRect,
text: &str,
) {
builder
.spawn(NodeBundle {
style: Style {
margin,
padding: UiRect {
top: Val::Px(1.),
left: Val::Px(5.),
right: Val::Px(5.),
bottom: Val::Px(1.),
},
..Default::default()
},
background_color: BackgroundColor(background_color),
..Default::default()
})
.with_children(|builder| {
builder.spawn(TextBundle::from_section(
text,
TextStyle {
font,
font_size: 24.0,
color: Color::BLACK,
},
));
});
}