Seregon/StratoSDK

StratoSDK is a framework with a declarative approach similar to Flutter/React, written and designed entirely for Rust.

Rust/27.3 KB/No license
crates/strato-ui-renderer/examples/flex/root_view.rs
raw
StratoSDK / crates / strato-ui-renderer / examples / flex / root_view.rs
1use strato_ui::fonts::FamilyId;
2use strato_ui::SingletonEntity as _;
3use strato_ui::{
4 elements::{
5 Border, ConstrainedBox, Container, Flex, MainAxisAlignment, MainAxisSize, ParentElement,
6 Rect, Shrinkable, Stack, Text, Wrap,
7 },
8 AppContext, Element, Entity, TypedActionView, View, ViewContext,
9};
10 
11use strato_ui::color::ColorU;
12 
13pub struct RootView {
14 font_family: FamilyId,
15}
16 
17impl RootView {
18 pub fn new(ctx: &mut ViewContext<Self>) -> Self {
19 let font_family = strato_ui::fonts::Cache::handle(ctx)
20 .update(ctx, |cache, _| cache.load_system_font("Arial").unwrap());
21 RootView { font_family }
22 }
23 
24 fn make_label(&self, label: String) -> Box<dyn Element> {
25 Flex::row()
26 .with_child(Text::new_inline(label, self.font_family, 16.).finish())
27 .finish()
28 }
29 
30 fn make_row(&self) -> Flex {
31 Flex::row()
32 .with_spacing(20.)
33 .with_child(
34 Container::new(
35 ConstrainedBox::new(Text::new_inline("1", self.font_family, 16.).finish())
36 .with_width(200.)
37 .with_height(50.)
38 .finish(),
39 )
40 .with_background_color(ColorU::new(255, 0, 0, 255))
41 .finish(),
42 )
43 .with_child(
44 Container::new(
45 ConstrainedBox::new(Text::new_inline("2", self.font_family, 16.).finish())
46 .with_width(200.)
47 .with_height(50.)
48 .finish(),
49 )
50 .with_background_color(ColorU::new(0, 255, 0, 255))
51 .finish(),
52 )
53 .with_child(
54 Container::new(
55 ConstrainedBox::new(Text::new_inline("3", self.font_family, 16.).finish())
56 .with_width(200.)
57 .with_height(50.)
58 .finish(),
59 )
60 .with_background_color(ColorU::new(0, 0, 255, 255))
61 .finish(),
62 )
63 .with_main_axis_size(MainAxisSize::Max)
64 }
65 
66 fn make_wrap_row(&self) -> Wrap {
67 Wrap::row()
68 .with_spacing(20.)
69 .with_run_spacing(10.)
70 .with_child(
71 Container::new(
72 ConstrainedBox::new(Text::new_inline("1", self.font_family, 16.).finish())
73 .with_width(200.)
74 .with_height(50.)
75 .finish(),
76 )
77 .with_background_color(ColorU::new(255, 0, 0, 255))
78 .finish(),
79 )
80 .with_child(
81 Container::new(
82 ConstrainedBox::new(Text::new_inline("2", self.font_family, 16.).finish())
83 .with_width(200.)
84 .with_height(50.)
85 .finish(),
86 )
87 .with_background_color(ColorU::new(0, 255, 0, 255))
88 .finish(),
89 )
90 .with_child(
91 Container::new(
92 ConstrainedBox::new(Text::new_inline("3", self.font_family, 16.).finish())
93 .with_width(200.)
94 .with_height(50.)
95 .finish(),
96 )
97 .with_background_color(ColorU::new(0, 0, 255, 255))
98 .finish(),
99 )
100 }
101 
102 fn make_column(&self) -> Flex {
103 Flex::column()
104 .with_spacing(20.)
105 .with_child(
106 Container::new(
107 ConstrainedBox::new(Text::new_inline("1", self.font_family, 16.).finish())
108 .with_width(20.)
109 .with_height(50.)
110 .finish(),
111 )
112 .with_background_color(ColorU::new(255, 0, 0, 255))
113 .finish(),
114 )
115 .with_child(
116 Container::new(
117 ConstrainedBox::new(Text::new_inline("2", self.font_family, 16.).finish())
118 .with_width(20.)
119 .with_height(50.)
120 .finish(),
121 )
122 .with_background_color(ColorU::new(0, 255, 0, 255))
123 .finish(),
124 )
125 .with_child(
126 Container::new(
127 ConstrainedBox::new(Text::new_inline("3", self.font_family, 16.).finish())
128 .with_width(20.)
129 .with_height(50.)
130 .finish(),
131 )
132 .with_background_color(ColorU::new(0, 0, 255, 255))
133 .finish(),
134 )
135 .with_main_axis_size(MainAxisSize::Max)
136 }
137}
138 
139impl Entity for RootView {
140 type Event = ();
141}
142impl View for RootView {
143 fn ui_name() -> &'static str {
144 "RootView"
145 }
146 
147 // Let's render a simple black rect background.
148 fn render(&self, _: &AppContext) -> Box<dyn Element> {
149 let row_between = Container::new(
150 Shrinkable::new(
151 1.,
152 self.make_row()
153 .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
154 .finish(),
155 )
156 .finish(),
157 )
158 .with_border(Border::all(2.).with_border_color(ColorU::white()))
159 .finish();
160 
161 let row_between_reverse = Container::new(
162 Shrinkable::new(
163 1.,
164 self.make_row()
165 .with_reverse_orientation()
166 .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
167 .finish(),
168 )
169 .finish(),
170 )
171 .with_border(Border::all(2.).with_border_color(ColorU::white()))
172 .finish();
173 
174 let row_evenly = Container::new(
175 Shrinkable::new(
176 1.,
177 self.make_row()
178 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
179 .finish(),
180 )
181 .finish(),
182 )
183 .with_border(Border::all(2.).with_border_color(ColorU::white()))
184 .finish();
185 
186 let row_evenly_reverse = Container::new(
187 Shrinkable::new(
188 1.,
189 self.make_row()
190 .with_reverse_orientation()
191 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
192 .finish(),
193 )
194 .finish(),
195 )
196 .with_border(Border::all(2.).with_border_color(ColorU::white()))
197 .finish();
198 
199 let row_center = Container::new(
200 Shrinkable::new(
201 1.,
202 self.make_row()
203 .with_main_axis_alignment(MainAxisAlignment::Center)
204 .finish(),
205 )
206 .finish(),
207 )
208 .with_border(Border::all(2.).with_border_color(ColorU::white()))
209 .finish();
210 
211 let row_center_reverse = Container::new(
212 Shrinkable::new(
213 1.,
214 self.make_row()
215 .with_reverse_orientation()
216 .with_main_axis_alignment(MainAxisAlignment::Center)
217 .finish(),
218 )
219 .finish(),
220 )
221 .with_border(Border::all(2.).with_border_color(ColorU::white()))
222 .finish();
223 
224 let row_start = Container::new(
225 Shrinkable::new(
226 1.,
227 self.make_row()
228 .with_main_axis_alignment(MainAxisAlignment::Start)
229 .finish(),
230 )
231 .finish(),
232 )
233 .with_border(Border::all(2.).with_border_color(ColorU::white()))
234 .finish();
235 
236 let row_start_reverse = Container::new(
237 Shrinkable::new(
238 1.,
239 self.make_row()
240 .with_reverse_orientation()
241 .with_main_axis_alignment(MainAxisAlignment::Start)
242 .finish(),
243 )
244 .finish(),
245 )
246 .with_border(Border::all(2.).with_border_color(ColorU::white()))
247 .finish();
248 
249 let row_end = Container::new(
250 Shrinkable::new(
251 1.,
252 self.make_row()
253 .with_main_axis_alignment(MainAxisAlignment::End)
254 .finish(),
255 )
256 .finish(),
257 )
258 .with_border(Border::all(2.).with_border_color(ColorU::white()))
259 .finish();
260 
261 let row_end_reverse = Container::new(
262 Shrinkable::new(
263 1.,
264 self.make_row()
265 .with_reverse_orientation()
266 .with_main_axis_alignment(MainAxisAlignment::End)
267 .finish(),
268 )
269 .finish(),
270 )
271 .with_border(Border::all(2.).with_border_color(ColorU::white()))
272 .finish();
273 
274 let column_between = Container::new(
275 Shrinkable::new(
276 1.,
277 self.make_column()
278 .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
279 .finish(),
280 )
281 .finish(),
282 )
283 .with_border(Border::all(2.).with_border_color(ColorU::white()))
284 .finish();
285 
286 let column_between_reverse = Container::new(
287 Shrinkable::new(
288 1.,
289 self.make_column()
290 .with_reverse_orientation()
291 .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
292 .finish(),
293 )
294 .finish(),
295 )
296 .with_border(Border::all(2.).with_border_color(ColorU::white()))
297 .finish();
298 
299 let column_evenly = Container::new(
300 Shrinkable::new(
301 1.,
302 self.make_column()
303 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
304 .finish(),
305 )
306 .finish(),
307 )
308 .with_border(Border::all(2.).with_border_color(ColorU::white()))
309 .finish();
310 
311 let column_evenly_reverse = Container::new(
312 Shrinkable::new(
313 1.,
314 self.make_column()
315 .with_reverse_orientation()
316 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
317 .finish(),
318 )
319 .finish(),
320 )
321 .with_border(Border::all(2.).with_border_color(ColorU::white()))
322 .finish();
323 
324 let column_center = Container::new(
325 Shrinkable::new(
326 1.,
327 self.make_column()
328 .with_main_axis_alignment(MainAxisAlignment::Center)
329 .finish(),
330 )
331 .finish(),
332 )
333 .with_border(Border::all(2.).with_border_color(ColorU::white()))
334 .finish();
335 
336 let column_center_reverse = Container::new(
337 Shrinkable::new(
338 1.,
339 self.make_column()
340 .with_reverse_orientation()
341 .with_main_axis_alignment(MainAxisAlignment::Center)
342 .finish(),
343 )
344 .finish(),
345 )
346 .with_border(Border::all(2.).with_border_color(ColorU::white()))
347 .finish();
348 
349 let column_start = Container::new(
350 Shrinkable::new(
351 1.,
352 self.make_column()
353 .with_main_axis_alignment(MainAxisAlignment::Start)
354 .finish(),
355 )
356 .finish(),
357 )
358 .with_border(Border::all(2.).with_border_color(ColorU::white()))
359 .finish();
360 
361 let column_start_reverse = Container::new(
362 Shrinkable::new(
363 1.,
364 self.make_column()
365 .with_reverse_orientation()
366 .with_main_axis_alignment(MainAxisAlignment::Start)
367 .finish(),
368 )
369 .finish(),
370 )
371 .with_border(Border::all(2.).with_border_color(ColorU::white()))
372 .finish();
373 
374 let column_end = Container::new(
375 Shrinkable::new(
376 1.,
377 self.make_column()
378 .with_main_axis_alignment(MainAxisAlignment::End)
379 .finish(),
380 )
381 .finish(),
382 )
383 .with_border(Border::all(2.).with_border_color(ColorU::white()))
384 .finish();
385 
386 let column_end_reverse = Container::new(
387 Shrinkable::new(
388 1.,
389 self.make_column()
390 .with_reverse_orientation()
391 .with_main_axis_alignment(MainAxisAlignment::End)
392 .finish(),
393 )
394 .finish(),
395 )
396 .with_border(Border::all(2.).with_border_color(ColorU::white()))
397 .finish();
398 
399 let wrap_row = Container::new(
400 Shrinkable::new(
401 1.,
402 self.make_wrap_row()
403 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
404 .finish(),
405 )
406 .finish(),
407 )
408 .with_border(Border::all(2.).with_border_color(ColorU::white()))
409 .finish();
410 
411 let wrap_row_reverse = Container::new(
412 Shrinkable::new(
413 1.,
414 self.make_wrap_row()
415 .with_reverse_orientation()
416 .with_main_axis_alignment(MainAxisAlignment::SpaceEvenly)
417 .finish(),
418 )
419 .finish(),
420 )
421 .with_border(Border::all(2.).with_border_color(ColorU::white()))
422 .finish();
423 
424 Stack::new()
425 .with_child(Rect::new().with_background_color(ColorU::black()).finish())
426 .with_child(
427 Flex::column()
428 .with_child(self.make_label("Space Between".to_owned()))
429 .with_child(row_between)
430 .with_child(row_between_reverse)
431 .with_child(self.make_label("Space Evenly".to_owned()))
432 .with_child(row_evenly)
433 .with_child(row_evenly_reverse)
434 .with_child(self.make_label("Center".to_owned()))
435 .with_child(row_center)
436 .with_child(row_center_reverse)
437 .with_child(self.make_label("Start".to_owned()))
438 .with_child(row_start)
439 .with_child(row_start_reverse)
440 .with_child(self.make_label("End".to_owned()))
441 .with_child(row_end)
442 .with_child(row_end_reverse)
443 .with_child(self.make_label("Wrap Row".to_owned()))
444 .with_child(wrap_row)
445 .with_child(wrap_row_reverse)
446 .with_child(
447 ConstrainedBox::new(
448 Flex::row()
449 .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
450 .with_main_axis_size(MainAxisSize::Max)
451 .with_child(self.make_label("Space Between ->".to_owned()))
452 .with_child(column_between)
453 .with_child(column_between_reverse)
454 .with_child(self.make_label("Space Evenly ->".to_owned()))
455 .with_child(column_evenly)
456 .with_child(column_evenly_reverse)
457 .with_child(self.make_label("Center ->".to_owned()))
458 .with_child(column_center)
459 .with_child(column_center_reverse)
460 .with_child(self.make_label("Start ->".to_owned()))
461 .with_child(column_start)
462 .with_child(column_start_reverse)
463 .with_child(self.make_label("End ->".to_owned()))
464 .with_child(column_end)
465 .with_child(column_end_reverse)
466 .finish(),
467 )
468 .with_max_height(300.)
469 .finish(),
470 )
471 .finish(),
472 )
473 .finish()
474 }
475}
476 
477impl TypedActionView for RootView {
478 type Action = ();
479}
480