docs/bevy/examples/ui/layout/flex_layout.rs 5.6 K · 160 lines · raw · history

1 //! Demonstrates how the `AlignItems` and `JustifyContent` properties can be composed to layout text.
2 use bevy::prelude::*;
3
4 const ALIGN_ITEMS_COLOR: Color = Color::srgb(1., 0.066, 0.349);
5 const JUSTIFY_CONTENT_COLOR: Color = Color::srgb(0.102, 0.522, 1.);
6 const MARGIN: Val = Val::Px(12.);
7
8 fn main() {
9 App::new()
10 .add_plugins(DefaultPlugins.set(WindowPlugin {
11 primary_window: Some(Window {
12 title: "Bevy Flex Layout Example".to_string(),
13 ..Default::default()
14 }),
15 ..Default::default()
16 }))
17 .add_systems(Startup, spawn_layout)
18 .run();
19 }
20
21 fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
22 let font = asset_server.load("fonts/FiraSans-Bold.ttf");
23 commands.spawn(Camera2d);
24 commands
25 .spawn((
26 Node {
27 // fill the entire window
28 width: percent(100),
29 height: percent(100),
30 flex_direction: FlexDirection::Column,
31 align_items: AlignItems::Center,
32 padding: MARGIN.all(),
33 row_gap: MARGIN,
34 ..Default::default()
35 },
36 BackgroundColor(Color::BLACK),
37 ))
38 .with_children(|builder| {
39 // spawn the key
40 builder
41 .spawn(Node {
42 flex_direction: FlexDirection::Row,
43 ..default()
44 })
45 .with_children(|builder| {
46 spawn_nested_text_bundle(
47 builder,
48 font.clone(),
49 ALIGN_ITEMS_COLOR,
50 MARGIN.right(),
51 "AlignItems",
52 );
53 spawn_nested_text_bundle(
54 builder,
55 font.clone(),
56 JUSTIFY_CONTENT_COLOR,
57 UiRect::default(),
58 "JustifyContent",
59 );
60 });
61
62 builder
63 .spawn(Node {
64 width: percent(100),
65 height: percent(100),
66 flex_direction: FlexDirection::Column,
67 row_gap: MARGIN,
68 ..default()
69 })
70 .with_children(|builder| {
71 // spawn one child node for each combination of `AlignItems` and `JustifyContent`
72 let justifications = [
73 JustifyContent::FlexStart,
74 JustifyContent::Center,
75 JustifyContent::FlexEnd,
76 JustifyContent::SpaceEvenly,
77 JustifyContent::SpaceAround,
78 JustifyContent::SpaceBetween,
79 ];
80 let alignments = [
81 AlignItems::Baseline,
82 AlignItems::FlexStart,
83 AlignItems::Center,
84 AlignItems::FlexEnd,
85 AlignItems::Stretch,
86 ];
87 for align_items in alignments {
88 builder
89 .spawn(Node {
90 width: percent(100),
91 height: percent(100),
92 flex_direction: FlexDirection::Row,
93 column_gap: MARGIN,
94 ..Default::default()
95 })
96 .with_children(|builder| {
97 for justify_content in justifications {
98 spawn_child_node(
99 builder,
100 font.clone(),
101 align_items,
102 justify_content,
103 );
104 }
105 });
106 }
107 });
108 });
109 }
110
111 fn spawn_child_node(
112 builder: &mut ChildSpawnerCommands,
113 font: Handle<Font>,
114 align_items: AlignItems,
115 justify_content: JustifyContent,
116 ) {
117 builder
118 .spawn((
119 Node {
120 flex_direction: FlexDirection::Column,
121 align_items,
122 justify_content,
123 width: percent(100),
124 height: percent(100),
125 ..default()
126 },
127 BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
128 ))
129 .with_children(|builder| {
130 let labels = [
131 (format!("{align_items:?}"), ALIGN_ITEMS_COLOR, 0.),
132 (format!("{justify_content:?}"), JUSTIFY_CONTENT_COLOR, 3.),
133 ];
134 for (text, color, top_margin) in labels {
135 // We nest the text within a parent node because margins and padding can't be directly applied to text nodes currently.
136 spawn_nested_text_bundle(builder, font.clone(), color, px(top_margin).top(), &text);
137 }
138 });
139 }
140
141 fn spawn_nested_text_bundle(
142 builder: &mut ChildSpawnerCommands,
143 font: Handle<Font>,
144 background_color: Color,
145 margin: UiRect,
146 text: &str,
147 ) {
148 builder
149 .spawn((
150 Node {
151 margin,
152 padding: UiRect::axes(px(5), px(1)),
153 ..default()
154 },
155 BackgroundColor(background_color),
156 ))
157 .with_children(|builder| {
158 builder.spawn((Text::new(text), TextFont::from(font), TextColor::BLACK));
159 });
160 }