StratoSDK is a framework with a declarative approach similar to Flutter/React, written and designed entirely for Rust.
| 1 | use strato_ui::elements::ClippedScrollStateHandle; |
| 2 | use strato_ui::elements::ClippedScrollable; |
| 3 | |
| 4 | use strato_ui::{ |
| 5 | elements::{ConstrainedBox, Container, Flex, ParentElement, Rect, ScrollbarWidth, Stack}, |
| 6 | AppContext, Element, Entity, TypedActionView, View, ViewContext, |
| 7 | }; |
| 8 | |
| 9 | use strato_ui::color::ColorU; |
| 10 | |
| 11 | #[derive(Default)] |
| 12 | pub struct RootView { |
| 13 | pub clipped_scroll_state: ClippedScrollStateHandle, |
| 14 | } |
| 15 | |
| 16 | impl RootView { |
| 17 | pub fn new(_ctx: &mut ViewContext<Self>) -> Self { |
| 18 | RootView::default() |
| 19 | } |
| 20 | } |
| 21 | |
| 22 | impl Entity for RootView { |
| 23 | type Event = (); |
| 24 | } |
| 25 | impl View for RootView { |
| 26 | fn ui_name() -> &'static str { |
| 27 | "RootView" |
| 28 | } |
| 29 | |
| 30 | fn render(&self, _: &AppContext) -> Box<dyn Element> { |
| 31 | let mut column = Flex::column(); |
| 32 | |
| 33 | // Create 10 rows, where each row has 10 rectanges (each of size 50*50). |
| 34 | // By the end, `column` will be 500 * 500. |
| 35 | for i in 0..10 { |
| 36 | let mut row = Flex::row(); |
| 37 | for j in 0..10 { |
| 38 | let color = (i + j) % 3; |
| 39 | let color = if color == 0 { |
| 40 | ColorU::new(255, 0, 0, 255) |
| 41 | } else if color == 1 { |
| 42 | ColorU::new(0, 255, 0, 255) |
| 43 | } else { |
| 44 | ColorU::new(0, 0, 255, 255) |
| 45 | }; |
| 46 | |
| 47 | row.add_child( |
| 48 | Container::new( |
| 49 | ConstrainedBox::new(Rect::new().finish()) |
| 50 | .with_height(50.) |
| 51 | .with_width(50.) |
| 52 | .finish(), |
| 53 | ) |
| 54 | .with_background_color(color) |
| 55 | .finish(), |
| 56 | ); |
| 57 | } |
| 58 | column.add_child(row.finish()); |
| 59 | } |
| 60 | |
| 61 | // Change this to [`ClippedScrollable::vertical`] to see what a vertically scrollable element looks like. |
| 62 | let horizontally_scrollable = ClippedScrollable::horizontal( |
| 63 | self.clipped_scroll_state.clone(), |
| 64 | column.finish(), |
| 65 | ScrollbarWidth::Auto, |
| 66 | ColorU::white().into(), |
| 67 | ColorU::white().into(), |
| 68 | ColorU::new(100, 100, 100, 255).into(), |
| 69 | ); |
| 70 | |
| 71 | let constrained = ConstrainedBox::new(horizontally_scrollable.finish()) |
| 72 | .with_height(250.) |
| 73 | .with_width(250.); |
| 74 | |
| 75 | Stack::new() |
| 76 | .with_child(Rect::new().with_background_color(ColorU::black()).finish()) |
| 77 | .with_child(constrained.finish()) |
| 78 | .finish() |
| 79 | } |
| 80 | } |
| 81 | |
| 82 | impl TypedActionView for RootView { |
| 83 | type Action = (); |
| 84 | } |
| 85 |