Add wrapping container with variable number of children to example

examples/taffy.rs

@@ -2,54 +2,80 @@ use vello::peniko::Color;
 use xilem::view::{button, div, flex_column, flex_row, scroll_view};
 use xilem::{view::View, App, AppLauncher};
 
-use taffy::style::{AlignItems, JustifyContent};
+use taffy::style::{AlignItems, FlexWrap, JustifyContent};
 use taffy::style_helpers::length;
 
+const COLORS: [Color; 4] = [
+    Color::LIGHT_GREEN,
+    Color::BLACK,
+    Color::AZURE,
+    Color::HOT_PINK,
+];
+
 fn app_logic(data: &mut i32) -> impl View<i32> {
     // here's some logic, deriving state for the view from our state
     let label = if *data == 1 {
-        "clicked 1 time".to_string()
+        "Square count: 1".to_string()
     } else {
-        format!("clicked {data} times")
+        format!("Square count: {data}")
     };
 
     // The actual UI Code starts here
     flex_column((
-        div(String::from("FIXED HEADER"))
+        div(String::from("Xilem Example"))
             .with_background_color(Color::RED)
             .with_style(|s| s.padding = length(20.0)),
         scroll_view(
             flex_column((
-                button(label, |data| {
-                    println!("clicked");
-                    *data += 1;
-                }),
+
                 flex_row((
+                    label,
+                    button("increase", |data| {
+                        println!("clicked increase");
+                        *data += 1;
+                    }),
                     button("decrease", |data| {
                         println!("clicked decrease");
-                        *data -= 1;
+                        if *data > 0 {
+                            *data -= 1;
+                        }
                     }),
                     button("reset", |data| {
                         println!("clicked reset");
-                        *data = 0;
+                        *data = 1;
                     }),
                 ))
                 .with_background_color(Color::BLUE_VIOLET)
                 .with_style(|s| {
                     s.gap.width = length(20.0);
-                    s.flex_grow = 1.0;
-                    s.justify_content = Some(JustifyContent::Center);
+                    s.padding = length(20.0);
+                    s.justify_content = Some(JustifyContent::Start);
                     s.align_items = Some(AlignItems::Center);
                 }),
+
+                div(String::from("The number of squares below is controlled by the counter above.\n\nTry clicking \"increase\" until the square count increases enough that the view becomes scrollable."))
+                    .with_background_color(Color::RED)
+                    .with_style(|s| s.padding = length(20.0)),
+
                 div(String::from("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))
                     .with_background_color(Color::RED)
                     .with_style(|s| s.padding = length(20.0)),
-                div(())
+
+                flex_row((0..*data).map(|i| {
+                    div(()).with_background_color(COLORS[(i % 4) as usize]).with_style(|s| {
+                        s.size.width = length(200.0);
+                        s.size.height = length(200.0);
+                    })
+                }).collect::<Vec<_>>())
                     .with_background_color(Color::FOREST_GREEN)
-                    .with_style(|s| s.flex_grow = 1.0),
+                    .with_style(|s| {
+                        s.flex_grow = 1.0;
+                        s.flex_wrap = FlexWrap::Wrap;
+                        s.gap = length(20.0);
+                        s.padding = length(20.0);
+                    }),
             ))
             .with_style(|s| {
-                s.size.height = length(1200.0);
                 s.gap.height = length(20.0);
                 s.padding.left = length(20.0);
                 s.padding.right = length(20.0);
@@ -64,10 +90,10 @@ fn app_logic(data: &mut i32) -> impl View<i32> {
         s.padding.top = length(20.0);
         s.padding.bottom = length(20.0);
     })
-    .with_background_color(Color::BLACK)
+    .with_background_color(Color::DARK_GRAY)
 }
 
 fn main() {
-    let app = App::new(0, app_logic);
+    let app = App::new(1, app_logic);
     AppLauncher::new(app).run()
 }