Merge pull request #35 from hecrj/feature/scrollables

Scrollable widget

2 files changed, 132 insertions, 20 deletions

diff --git a/examples/scroll.rs b/examples/scroll.rs
new file mode 100644
index 00000000..608923fe
--- /dev/null
+++ b/examples/scroll.rs
@@ -0,0 +1,75 @@
+use iced::{
+    button, scrollable, Align, Application, Button, Column, Element, Image,
+    Justify, Length, Scrollable, Text,
+};
+
+pub fn main() {
+    env_logger::init();
+
+    Example::default().run()
+}
+
+#[derive(Default)]
+struct Example {
+    item_count: u16,
+
+    scroll: scrollable::State,
+    add_button: button::State,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum Message {
+    AddItem,
+}
+
+impl Application for Example {
+    type Message = Message;
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::AddItem => {
+                self.item_count += 1;
+            }
+        }
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let content = (0..self.item_count)
+            .fold(
+                Scrollable::new(&mut self.scroll)
+                    .spacing(20)
+                    .padding(20)
+                    .align_items(Align::Center),
+                |scrollable, i| {
+                    if i % 2 == 0 {
+                        scrollable.push(lorem_ipsum().width(Length::Units(600)))
+                    } else {
+                        scrollable.push(
+                            Image::new(format!(
+                                "{}/examples/resources/ferris.png",
+                                env!("CARGO_MANIFEST_DIR")
+                            ))
+                            .width(Length::Units(400)),
+                        )
+                    }
+                },
+            )
+            .push(
+                Button::new(&mut self.add_button, Text::new("Add item"))
+                    .on_press(Message::AddItem)
+                    .padding(20)
+                    .border_radius(5),
+            );
+
+        Column::new()
+            .height(Length::Fill)
+            .justify_content(Justify::Center)
+            .padding(20)
+            .push(content)
+            .into()
+    }
+}
+
+fn lorem_ipsum() -> Text {
+    Text::new("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dui vel massa blandit interdum. Quisque placerat, odio ut vulputate sagittis, augue est facilisis ex, eget euismod felis magna in sapien. Nullam luctus consequat massa, ac interdum mauris blandit pellentesque. Nullam in est urna. Aliquam tristique lectus ac luctus feugiat. Aenean libero diam, euismod facilisis consequat quis, pellentesque luctus erat. Praesent vel tincidunt elit.")
+}
diff --git a/examples/tour.rs b/examples/tour.rs
index 59a8c525..f63b4cfe 100644
--- a/examples/tour.rs
+++ b/examples/tour.rs
@@ -1,7 +1,7 @@
 use iced::{
-    button, slider, text::HorizontalAlignment, Align, Application, Background,
-    Button, Checkbox, Color, Column, Element, Image, Justify, Length, Radio,
-    Row, Slider, Text,
+    button, scrollable, slider, text::HorizontalAlignment, Align, Application,
+    Background, Button, Checkbox, Color, Column, Element, Image, Justify,
+    Length, Radio, Row, Scrollable, Slider, Text,
 };
 
 pub fn main() {
@@ -14,6 +14,7 @@ pub fn main() {
 
 pub struct Tour {
     steps: Steps,
+    scroll: scrollable::State,
     back_button: button::State,
     next_button: button::State,
     debug: bool,
@@ -23,6 +24,7 @@ impl Tour {
     pub fn new() -> Tour {
         Tour {
             steps: Steps::new(),
+            scroll: scrollable::State::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
             debug: false,
@@ -88,11 +90,13 @@ impl Application for Tour {
         };
 
         Column::new()
-            .width(Length::Fill)
             .height(Length::Fill)
-            .align_items(Align::Center)
             .justify_content(Justify::Center)
-            .push(element)
+            .push(
+                Scrollable::new(&mut self.scroll)
+                    .align_items(Align::Center)
+                    .push(element),
+            )
             .into()
     }
 }
@@ -134,6 +138,7 @@ impl Steps {
                     width: 300,
                     slider: slider::State::new(),
                 },
+                Step::Scrollable,
                 Step::Debugger,
                 Step::End,
             ],
@@ -195,6 +200,7 @@ enum Step {
         width: u16,
         slider: slider::State,
     },
+    Scrollable,
     Debugger,
     End,
 }
@@ -265,6 +271,7 @@ impl<'a> Step {
             Step::Text { .. } => true,
             Step::Image { .. } => true,
             Step::RowsAndColumns { .. } => true,
+            Step::Scrollable => true,
             Step::Debugger => true,
             Step::End => false,
         }
@@ -289,6 +296,7 @@ impl<'a> Step {
             } => {
                 Self::rows_and_columns(*layout, spacing_slider, *spacing).into()
             }
+            Step::Scrollable => Self::scrollable().into(),
             Step::Debugger => Self::debugger(debug).into(),
             Step::End => Self::end().into(),
         }
@@ -502,20 +510,7 @@ impl<'a> Step {
     ) -> Column<'a, StepMessage> {
         Self::container("Image")
             .push(Text::new("An image that tries to keep its aspect ratio."))
-            .push(
-                // This should go away once we unify resource loading on native
-                // platforms
-                if cfg!(target_arch = "wasm32") {
-                    Image::new("resources/ferris.png")
-                } else {
-                    Image::new(format!(
-                        "{}/examples/resources/ferris.png",
-                        env!("CARGO_MANIFEST_DIR")
-                    ))
-                }
-                .width(Length::Units(width))
-                .align_self(Align::Center),
-            )
+            .push(ferris(width))
             .push(Slider::new(
                 slider,
                 100.0..=500.0,
@@ -528,6 +523,33 @@ impl<'a> Step {
             )
     }
 
+    fn scrollable() -> Column<'a, StepMessage> {
+        Self::container("Scrollable")
+            .push(Text::new(
+                "Iced supports scrollable content. Try it out! Find the \
+                 button further below.",
+            ))
+            .push(
+                Text::new(
+                    "Tip: You can use the scrollbar to scroll down faster!",
+                )
+                .size(16),
+            )
+            .push(Column::new().height(Length::Units(4096)))
+            .push(
+                Text::new("You are halfway there!")
+                    .size(30)
+                    .horizontal_alignment(HorizontalAlignment::Center),
+            )
+            .push(Column::new().height(Length::Units(4096)))
+            .push(ferris(300))
+            .push(
+                Text::new("You made it!")
+                    .size(50)
+                    .horizontal_alignment(HorizontalAlignment::Center),
+            )
+    }
+
     fn debugger(debug: bool) -> Column<'a, StepMessage> {
         Self::container("Debugger")
             .push(Text::new(
@@ -555,6 +577,21 @@ impl<'a> Step {
     }
 }
 
+fn ferris(width: u16) -> Image {
+    // This should go away once we unify resource loading on native
+    // platforms
+    if cfg!(target_arch = "wasm32") {
+        Image::new("resources/ferris.png")
+    } else {
+        Image::new(format!(
+            "{}/examples/resources/ferris.png",
+            env!("CARGO_MANIFEST_DIR")
+        ))
+    }
+    .width(Length::Units(width))
+    .align_self(Align::Center)
+}
+
 fn button<'a, Message>(
     state: &'a mut button::State,
     label: &str,