Add scrolling progress indicators to `scrollable` example

1 files changed, 32 insertions, 4 deletions

diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index 32c44df8..3416b83d 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -1,8 +1,8 @@
 mod style;
 
 use iced::{
-    button, scrollable, Button, Column, Container, Element, Length, Radio, Row,
-    Rule, Sandbox, Scrollable, Settings, Space, Text,
+    button, scrollable, Button, Column, Container, Element, Length,
+    ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Space, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -19,6 +19,7 @@ enum Message {
     ThemeChanged(style::Theme),
     ScrollToTop(usize),
     ScrollToBottom(usize),
+    Scrolled(usize, f32),
 }
 
 impl Sandbox for ScrollableDemo {
@@ -41,11 +42,20 @@ impl Sandbox for ScrollableDemo {
             Message::ScrollToTop(i) => {
                 if let Some(variant) = self.variants.get_mut(i) {
                     variant.scrollable.snap_to(0.0);
+
+                    variant.latest_offset = 0.0;
                 }
             }
             Message::ScrollToBottom(i) => {
                 if let Some(variant) = self.variants.get_mut(i) {
                     variant.scrollable.snap_to(1.0);
+
+                    variant.latest_offset = 1.0;
+                }
+            }
+            Message::Scrolled(i, offset) => {
+                if let Some(variant) = self.variants.get_mut(i) {
+                    variant.latest_offset = offset;
                 }
             }
         }
@@ -82,6 +92,9 @@ impl Sandbox for ScrollableDemo {
                             .spacing(10)
                             .width(Length::Fill)
                             .height(Length::Fill)
+                            .on_scroll(move |offset| {
+                                Message::Scrolled(i, offset)
+                            })
                             .style(*theme)
                             .push(Text::new(variant.title))
                             .push(
@@ -143,10 +156,20 @@ impl Sandbox for ScrollableDemo {
                             .on_press(Message::ScrollToTop(i)),
                         );
 
-                    Container::new(scrollable)
+                    Column::new()
                         .width(Length::Fill)
                         .height(Length::Fill)
-                        .style(*theme)
+                        .spacing(10)
+                        .push(
+                            Container::new(scrollable)
+                                .width(Length::Fill)
+                                .height(Length::Fill)
+                                .style(*theme),
+                        )
+                        .push(ProgressBar::new(
+                            0.0..=1.0,
+                            variant.latest_offset,
+                        ))
                         .into()
                 })
                 .collect(),
@@ -181,6 +204,7 @@ struct Variant {
     scrollbar_width: Option<u16>,
     scrollbar_margin: Option<u16>,
     scroller_width: Option<u16>,
+    latest_offset: f32,
 }
 
 impl Variant {
@@ -194,6 +218,7 @@ impl Variant {
                 scrollbar_width: None,
                 scrollbar_margin: None,
                 scroller_width: None,
+                latest_offset: 0.0,
             },
             Self {
                 title: "Slimmed & Margin",
@@ -203,6 +228,7 @@ impl Variant {
                 scrollbar_width: Some(4),
                 scrollbar_margin: Some(3),
                 scroller_width: Some(4),
+                latest_offset: 0.0,
             },
             Self {
                 title: "Wide Scroller",
@@ -212,6 +238,7 @@ impl Variant {
                 scrollbar_width: Some(4),
                 scrollbar_margin: None,
                 scroller_width: Some(10),
+                latest_offset: 0.0,
             },
             Self {
                 title: "Narrow Scroller",
@@ -221,6 +248,7 @@ impl Variant {
                 scrollbar_width: Some(10),
                 scrollbar_margin: None,
                 scroller_width: Some(4),
+                latest_offset: 0.0,
             },
         ]
     }