Add scrollable alignment option

iced-rs · Jun 13, 2023 · cdd2a39 · cdd2a39
1 parent 329fbc7
commit cdd2a39
Show file tree

Hide file tree

Showing 2 changed files with 194 additions and 23 deletions.
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
@@ -19,6 +19,7 @@ struct ScrollableDemo {
     scrollbar_margin: u16,
     scroller_width: u16,
     current_scroll_offset: scrollable::RelativeOffset,
+    alignment: scrollable::Alignment,
 }
 
 #[derive(Debug, Clone, Eq, PartialEq, Copy)]
@@ -31,6 +32,7 @@ enum Direction {
 #[derive(Debug, Clone)]
 enum Message {
     SwitchDirection(Direction),
+    AlignmentChanged(scrollable::Alignment),
     ScrollbarWidthChanged(u16),
     ScrollbarMarginChanged(u16),
     ScrollerWidthChanged(u16),
@@ -53,6 +55,7 @@ impl Application for ScrollableDemo {
                 scrollbar_margin: 0,
                 scroller_width: 10,
                 current_scroll_offset: scrollable::RelativeOffset::START,
+                alignment: scrollable::Alignment::Start,
             },
             Command::none(),
         )
@@ -73,6 +76,15 @@ impl Application for ScrollableDemo {
                     self.current_scroll_offset,
                 )
             }
+            Message::AlignmentChanged(alignment) => {
+                self.current_scroll_offset = scrollable::RelativeOffset::START;
+                self.alignment = alignment;
+
+                scrollable::snap_to(
+                    SCROLLABLE_ID.clone(),
+                    self.current_scroll_offset,
+                )
+            }
             Message::ScrollbarWidthChanged(width) => {
                 self.scrollbar_width = width;
 
@@ -164,10 +176,33 @@ impl Application for ScrollableDemo {
         .spacing(10)
         .width(Length::Fill);
 
-        let scroll_controls =
-            row![scroll_slider_controls, scroll_orientation_controls]
-                .spacing(20)
-                .width(Length::Fill);
+        let scroll_alignment_controls = column(vec![
+            text("Scrollable alignment:").into(),
+            radio(
+                "Start",
+                scrollable::Alignment::Start,
+                Some(self.alignment),
+                Message::AlignmentChanged,
+            )
+            .into(),
+            radio(
+                "End",
+                scrollable::Alignment::End,
+                Some(self.alignment),
+                Message::AlignmentChanged,
+            )
+            .into(),
+        ])
+        .spacing(10)
+        .width(Length::Fill);
+
+        let scroll_controls = row![
+            scroll_slider_controls,
+            scroll_orientation_controls,
+            scroll_alignment_controls
+        ]
+        .spacing(20)
+        .width(Length::Fill);
 
         let scroll_to_end_button = || {
             button("Scroll to end")
@@ -203,7 +238,8 @@ impl Application for ScrollableDemo {
                     Properties::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
-                        .scroller_width(self.scroller_width),
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
                 )
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
@@ -227,7 +263,8 @@ impl Application for ScrollableDemo {
                     Properties::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
-                        .scroller_width(self.scroller_width),
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
                 )
                 .style(theme::Scrollable::custom(ScrollbarCustomStyle))
                 .id(SCROLLABLE_ID.clone())
@@ -268,13 +305,15 @@ impl Application for ScrollableDemo {
                     Properties::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
-                        .scroller_width(self.scroller_width),
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
                 )
                 .horizontal_scroll(
                     Properties::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
-                        .scroller_width(self.scroller_width),
+                        .scroller_width(self.scroller_width)
+                        .alignment(self.alignment),
                 )
                 .style(theme::Scrollable::Custom(Box::new(
                     ScrollbarCustomStyle,