Implement Scrollable in iced_pure

native/src/widget/scrollable.rs

@@ -139,73 +139,471 @@ impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
         self.content = self.content.push(child);
         self
     }
+}
 
-    fn notify_on_scroll(
+/// Computes the layout of a [`Scrollable`].
-        &self,
+pub fn layout<Renderer>(
-        bounds: Rectangle,
+    renderer: &Renderer,
-        content_bounds: Rectangle,
+    limits: &layout::Limits,
-        shell: &mut Shell<'_, Message>,
+    width: Length,
-    ) {
+    height: Length,
-        if content_bounds.height <= bounds.height {
+    layout_content: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
-            return;
+) -> layout::Node {
-        }
+    let limits = limits.width(width).height(height);
 
-        if let Some(on_scroll) = &self.on_scroll {
+    let child_limits = layout::Limits::new(
-            shell.publish(on_scroll(
+        Size::new(limits.min().width, 0.0),
-                self.state.offset.absolute(bounds, content_bounds)
+        Size::new(limits.max().width, f32::INFINITY),
-                    / (content_bounds.height - bounds.height),
+    );
-            ));
+
+    let content = layout_content(renderer, &child_limits);
+    let size = limits.resolve(content.size());
+
+    layout::Node::with_children(size, vec![content])
+}
+
+/// Processes an [`Event`] and updates the [`State`] of a [`Scrollable`]
+/// accordingly.
+pub fn update<Message>(
+    state: &mut State,
+    event: Event,
+    layout: Layout<'_>,
+    cursor_position: Point,
+    clipboard: &mut dyn Clipboard,
+    shell: &mut Shell<'_, Message>,
+    scrollbar_width: u16,
+    scrollbar_margin: u16,
+    scroller_width: u16,
+    on_scroll: &Option<Box<dyn Fn(f32) -> Message>>,
+    update_content: impl FnOnce(
+        Event,
+        Layout<'_>,
+        Point,
+        &mut dyn Clipboard,
+        &mut Shell<'_, Message>,
+    ) -> event::Status,
+) -> event::Status {
+    let bounds = layout.bounds();
+    let is_mouse_over = bounds.contains(cursor_position);
+
+    let content = layout.children().next().unwrap();
+    let content_bounds = content.bounds();
+
+    let scrollbar = scrollbar(
+        state,
+        scrollbar_width,
+        scrollbar_margin,
+        scroller_width,
+        bounds,
+        content_bounds,
+    );
+    let is_mouse_over_scrollbar = scrollbar
+        .as_ref()
+        .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+        .unwrap_or(false);
+
+    let event_status = {
+        let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+            Point::new(
+                cursor_position.x,
+                cursor_position.y + state.offset(bounds, content_bounds) as f32,
+            )
+        } else {
+            // TODO: Make `cursor_position` an `Option<Point>` so we can encode
+            // cursor availability.
+            // This will probably happen naturally once we add multi-window
+            // support.
+            Point::new(cursor_position.x, -1.0)
+        };
+
+        update_content(
+            event.clone(),
+            content,
+            cursor_position,
+            clipboard,
+            shell,
+        )
+    };
+
+    if let event::Status::Captured = event_status {
+        return event::Status::Captured;
+    }
+
+    if is_mouse_over {
+        match event {
+            Event::Mouse(mouse::Event::WheelScrolled { delta }) => {
+                match delta {
+                    mouse::ScrollDelta::Lines { y, .. } => {
+                        // TODO: Configurable speed (?)
+                        state.scroll(y * 60.0, bounds, content_bounds);
+                    }
+                    mouse::ScrollDelta::Pixels { y, .. } => {
+                        state.scroll(y, bounds, content_bounds);
+                    }
+                }
+
+                notify_on_scroll(
+                    state,
+                    on_scroll,
+                    bounds,
+                    content_bounds,
+                    shell,
+                );
+
+                return event::Status::Captured;
+            }
+            Event::Touch(event) => {
+                match event {
+                    touch::Event::FingerPressed { .. } => {
+                        state.scroll_box_touched_at = Some(cursor_position);
+                    }
+                    touch::Event::FingerMoved { .. } => {
+                        if let Some(scroll_box_touched_at) =
+                            state.scroll_box_touched_at
+                        {
+                            let delta =
+                                cursor_position.y - scroll_box_touched_at.y;
+
+                            state.scroll(delta, bounds, content_bounds);
+
+                            state.scroll_box_touched_at = Some(cursor_position);
+
+                            notify_on_scroll(
+                                state,
+                                on_scroll,
+                                bounds,
+                                content_bounds,
+                                shell,
+                            );
+                        }
+                    }
+                    touch::Event::FingerLifted { .. }
+                    | touch::Event::FingerLost { .. } => {
+                        state.scroll_box_touched_at = None;
+                    }
+                }
+
+                return event::Status::Captured;
+            }
+            _ => {}
         }
     }
 
-    fn scrollbar(
+    if state.is_scroller_grabbed() {
-        &self,
+        match event {
-        bounds: Rectangle,
+            Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
-        content_bounds: Rectangle,
+            | Event::Touch(touch::Event::FingerLifted { .. })
-    ) -> Option<Scrollbar> {
+            | Event::Touch(touch::Event::FingerLost { .. }) => {
-        let offset = self.state.offset(bounds, content_bounds);
+                state.scroller_grabbed_at = None;
 
-        if content_bounds.height > bounds.height {
+                return event::Status::Captured;
-            let outer_width = self.scrollbar_width.max(self.scroller_width)
+            }
-                + 2 * self.scrollbar_margin;
+            Event::Mouse(mouse::Event::CursorMoved { .. })
+            | Event::Touch(touch::Event::FingerMoved { .. }) => {
+                if let (Some(scrollbar), Some(scroller_grabbed_at)) =
+                    (scrollbar, state.scroller_grabbed_at)
+                {
+                    state.scroll_to(
+                        scrollbar.scroll_percentage(
+                            scroller_grabbed_at,
+                            cursor_position,
+                        ),
+                        bounds,
+                        content_bounds,
+                    );
 
-            let outer_bounds = Rectangle {
+                    notify_on_scroll(
-                x: bounds.x + bounds.width - outer_width as f32,
+                        state,
-                y: bounds.y,
+                        on_scroll,
-                width: outer_width as f32,
+                        bounds,
-                height: bounds.height,
+                        content_bounds,
-            };
+                        shell,
+                    );
 
-            let scrollbar_bounds = Rectangle {
+                    return event::Status::Captured;
-                x: bounds.x + bounds.width
+                }
-                    - f32::from(outer_width / 2 + self.scrollbar_width / 2),
+            }
-                y: bounds.y,
+            _ => {}
-                width: self.scrollbar_width as f32,
-                height: bounds.height,
-            };
-
-            let ratio = bounds.height / content_bounds.height;
-            let scroller_height = bounds.height * ratio;
-            let y_offset = offset as f32 * ratio;
-
-            let scroller_bounds = Rectangle {
-                x: bounds.x + bounds.width
-                    - f32::from(outer_width / 2 + self.scroller_width / 2),
-                y: scrollbar_bounds.y + y_offset,
-                width: self.scroller_width as f32,
-                height: scroller_height,
-            };
-
-            Some(Scrollbar {
-                outer_bounds,
-                bounds: scrollbar_bounds,
-                scroller: Scroller {
-                    bounds: scroller_bounds,
-                },
-            })
-        } else {
-            None
         }
+    } else if is_mouse_over_scrollbar {
+        match event {
+            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
+            | Event::Touch(touch::Event::FingerPressed { .. }) => {
+                if let Some(scrollbar) = scrollbar {
+                    if let Some(scroller_grabbed_at) =
+                        scrollbar.grab_scroller(cursor_position)
+                    {
+                        state.scroll_to(
+                            scrollbar.scroll_percentage(
+                                scroller_grabbed_at,
+                                cursor_position,
+                            ),
+                            bounds,
+                            content_bounds,
+                        );
+
+                        state.scroller_grabbed_at = Some(scroller_grabbed_at);
+
+                        notify_on_scroll(
+                            state,
+                            on_scroll,
+                            bounds,
+                            content_bounds,
+                            shell,
+                        );
+
+                        return event::Status::Captured;
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+
+    event::Status::Ignored
+}
+
+/// Computes the current [`mouse::Interaction`] of a [`Scrollable`].
+pub fn mouse_interaction(
+    state: &State,
+    layout: Layout<'_>,
+    cursor_position: Point,
+    scrollbar_width: u16,
+    scrollbar_margin: u16,
+    scroller_width: u16,
+    content_interaction: impl FnOnce(
+        Layout<'_>,
+        Point,
+        &Rectangle,
+    ) -> mouse::Interaction,
+) -> mouse::Interaction {
+    let bounds = layout.bounds();
+    let content_layout = layout.children().next().unwrap();
+    let content_bounds = content_layout.bounds();
+    let scrollbar = scrollbar(
+        state,
+        scrollbar_width,
+        scrollbar_margin,
+        scroller_width,
+        bounds,
+        content_bounds,
+    );
+
+    let is_mouse_over = bounds.contains(cursor_position);
+    let is_mouse_over_scrollbar = scrollbar
+        .as_ref()
+        .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+        .unwrap_or(false);
+
+    if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
+        mouse::Interaction::Idle
+    } else {
+        let offset = state.offset(bounds, content_bounds);
+
+        let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+            Point::new(cursor_position.x, cursor_position.y + offset as f32)
+        } else {
+            Point::new(cursor_position.x, -1.0)
+        };
+
+        content_interaction(
+            content_layout,
+            cursor_position,
+            &Rectangle {
+                y: bounds.y + offset as f32,
+                ..bounds
+            },
+        )
+    }
+}
+
+/// Draws a [`Scrollable`].
+pub fn draw<Renderer>(
+    state: &State,
+    renderer: &mut Renderer,
+    layout: Layout<'_>,
+    cursor_position: Point,
+    scrollbar_width: u16,
+    scrollbar_margin: u16,
+    scroller_width: u16,
+    style_sheet: &dyn StyleSheet,
+    draw_content: impl FnOnce(&mut Renderer, Layout<'_>, Point, &Rectangle),
+) where
+    Renderer: crate::Renderer,
+{
+    let bounds = layout.bounds();
+    let content_layout = layout.children().next().unwrap();
+    let content_bounds = content_layout.bounds();
+    let offset = state.offset(bounds, content_bounds);
+    let scrollbar = scrollbar(
+        state,
+        scrollbar_width,
+        scrollbar_margin,
+        scroller_width,
+        bounds,
+        content_bounds,
+    );
+
+    let is_mouse_over = bounds.contains(cursor_position);
+    let is_mouse_over_scrollbar = scrollbar
+        .as_ref()
+        .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+        .unwrap_or(false);
+
+    let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+        Point::new(cursor_position.x, cursor_position.y + offset as f32)
+    } else {
+        Point::new(cursor_position.x, -1.0)
+    };
+
+    if let Some(scrollbar) = scrollbar {
+        renderer.with_layer(bounds, |renderer| {
+            renderer.with_translation(
+                Vector::new(0.0, -(offset as f32)),
+                |renderer| {
+                    draw_content(
+                        renderer,
+                        content_layout,
+                        cursor_position,
+                        &Rectangle {
+                            y: bounds.y + offset as f32,
+                            ..bounds
+                        },
+                    );
+                },
+            );
+        });
+
+        let style = if state.is_scroller_grabbed() {
+            style_sheet.dragging()
+        } else if is_mouse_over_scrollbar {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
+        let is_scrollbar_visible =
+            style.background.is_some() || style.border_width > 0.0;
+
+        renderer.with_layer(
+            Rectangle {
+                width: bounds.width + 2.0,
+                height: bounds.height + 2.0,
+                ..bounds
+            },
+            |renderer| {
+                if is_scrollbar_visible {
+                    renderer.fill_quad(
+                        renderer::Quad {
+                            bounds: scrollbar.bounds,
+                            border_radius: style.border_radius,
+                            border_width: style.border_width,
+                            border_color: style.border_color,
+                        },
+                        style
+                            .background
+                            .unwrap_or(Background::Color(Color::TRANSPARENT)),
+                    );
+                }
+
+                if is_mouse_over
+                    || state.is_scroller_grabbed()
+                    || is_scrollbar_visible
+                {
+                    renderer.fill_quad(
+                        renderer::Quad {
+                            bounds: scrollbar.scroller.bounds,
+                            border_radius: style.scroller.border_radius,
+                            border_width: style.scroller.border_width,
+                            border_color: style.scroller.border_color,
+                        },
+                        style.scroller.color,
+                    );
+                }
+            },
+        );
+    } else {
+        draw_content(
+            renderer,
+            content_layout,
+            cursor_position,
+            &Rectangle {
+                y: bounds.y + offset as f32,
+                ..bounds
+            },
+        );
+    }
+}
+
+fn scrollbar(
+    state: &State,
+    scrollbar_width: u16,
+    scrollbar_margin: u16,
+    scroller_width: u16,
+    bounds: Rectangle,
+    content_bounds: Rectangle,
+) -> Option<Scrollbar> {
+    let offset = state.offset(bounds, content_bounds);
+
+    if content_bounds.height > bounds.height {
+        let outer_width =
+            scrollbar_width.max(scroller_width) + 2 * scrollbar_margin;
+
+        let outer_bounds = Rectangle {
+            x: bounds.x + bounds.width - outer_width as f32,
+            y: bounds.y,
+            width: outer_width as f32,
+            height: bounds.height,
+        };
+
+        let scrollbar_bounds = Rectangle {
+            x: bounds.x + bounds.width
+                - f32::from(outer_width / 2 + scrollbar_width / 2),
+            y: bounds.y,
+            width: scrollbar_width as f32,
+            height: bounds.height,
+        };
+
+        let ratio = bounds.height / content_bounds.height;
+        let scroller_height = bounds.height * ratio;
+        let y_offset = offset as f32 * ratio;
+
+        let scroller_bounds = Rectangle {
+            x: bounds.x + bounds.width
+                - f32::from(outer_width / 2 + scroller_width / 2),
+            y: scrollbar_bounds.y + y_offset,
+            width: scroller_width as f32,
+            height: scroller_height,
+        };
+
+        Some(Scrollbar {
+            outer_bounds,
+            bounds: scrollbar_bounds,
+            scroller: Scroller {
+                bounds: scroller_bounds,
+            },
+        })
+    } else {
+        None
+    }
+}
+
+fn notify_on_scroll<Message>(
+    state: &State,
+    on_scroll: &Option<Box<dyn Fn(f32) -> Message>>,
+    bounds: Rectangle,
+    content_bounds: Rectangle,
+    shell: &mut Shell<'_, Message>,
+) {
+    if content_bounds.height <= bounds.height {
+        return;
+    }
+
+    if let Some(on_scroll) = on_scroll {
+        shell.publish(on_scroll(
+            state.offset.absolute(bounds, content_bounds)
+                / (content_bounds.height - bounds.height),
+        ));
     }
 }
 
@@ -227,20 +625,13 @@ where
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let limits = limits
+        layout(
-            .max_height(self.max_height)
+            renderer,
-            .width(Widget::<Message, Renderer>::width(&self.content))
+            limits,
-            .height(self.height);
+            Widget::<Message, Renderer>::width(self),
-
+            self.height,
-        let child_limits = layout::Limits::new(
+            |renderer, limits| self.content.layout(renderer, limits),
-            Size::new(limits.min().width, 0.0),
+        )
-            Size::new(limits.max().width, f32::INFINITY),
-        );
-
-        let content = self.content.layout(renderer, &child_limits);
-        let size = limits.resolve(content.size());
-
-        layout::Node::with_children(size, vec![content])
     }
 
     fn on_event(
@@ -252,174 +643,28 @@ where
         clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
     ) -> event::Status {
-        let bounds = layout.bounds();
+        update(
-        let is_mouse_over = bounds.contains(cursor_position);
+            &mut self.state,
-
+            event,
-        let content = layout.children().next().unwrap();
+            layout,
-        let content_bounds = content.bounds();
+            cursor_position,
-
+            clipboard,
-        let scrollbar = self.scrollbar(bounds, content_bounds);
+            shell,
-        let is_mouse_over_scrollbar = scrollbar
+            self.scrollbar_width,
-            .as_ref()
+            self.scrollbar_margin,
-            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+            self.scroller_width,
-            .unwrap_or(false);
+            &self.on_scroll,
-
+            |event, layout, cursor_position, clipboard, shell| {
-        let event_status = {
+                self.content.on_event(
-            let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+                    event,
-                Point::new(
+                    layout,
-                    cursor_position.x,
+                    cursor_position,
-                    cursor_position.y
+                    renderer,
-                        + self.state.offset(bounds, content_bounds) as f32,
+                    clipboard,
+                    shell,
                 )
-            } else {
+            },
-                // TODO: Make `cursor_position` an `Option<Point>` so we can encode
+        )
-                // cursor availability.
-                // This will probably happen naturally once we add multi-window
-                // support.
-                Point::new(cursor_position.x, -1.0)
-            };
-
-            self.content.on_event(
-                event.clone(),
-                content,
-                cursor_position,
-                renderer,
-                clipboard,
-                shell,
-            )
-        };
-
-        if let event::Status::Captured = event_status {
-            return event::Status::Captured;
-        }
-
-        if is_mouse_over {
-            match event {
-                Event::Mouse(mouse::Event::WheelScrolled { delta }) => {
-                    match delta {
-                        mouse::ScrollDelta::Lines { y, .. } => {
-                            // TODO: Configurable speed (?)
-                            self.state.scroll(y * 60.0, bounds, content_bounds);
-                        }
-                        mouse::ScrollDelta::Pixels { y, .. } => {
-                            self.state.scroll(y, bounds, content_bounds);
-                        }
-                    }
-
-                    self.notify_on_scroll(bounds, content_bounds, shell);
-
-                    return event::Status::Captured;
-                }
-                Event::Touch(event) => {
-                    match event {
-                        touch::Event::FingerPressed { .. } => {
-                            self.state.scroll_box_touched_at =
-                                Some(cursor_position);
-                        }
-                        touch::Event::FingerMoved { .. } => {
-                            if let Some(scroll_box_touched_at) =
-                                self.state.scroll_box_touched_at
-                            {
-                                let delta =
-                                    cursor_position.y - scroll_box_touched_at.y;
-
-                                self.state.scroll(
-                                    delta,
-                                    bounds,
-                                    content_bounds,
-                                );
-
-                                self.state.scroll_box_touched_at =
-                                    Some(cursor_position);
-
-                                self.notify_on_scroll(
-                                    bounds,
-                                    content_bounds,
-                                    shell,
-                                );
-                            }
-                        }
-                        touch::Event::FingerLifted { .. }
-                        | touch::Event::FingerLost { .. } => {
-                            self.state.scroll_box_touched_at = None;
-                        }
-                    }
-
-                    return event::Status::Captured;
-                }
-                _ => {}
-            }
-        }
-
-        if self.state.is_scroller_grabbed() {
-            match event {
-                Event::Mouse(mouse::Event::ButtonReleased(
-                    mouse::Button::Left,
-                ))
-                | Event::Touch(touch::Event::FingerLifted { .. })
-                | Event::Touch(touch::Event::FingerLost { .. }) => {
-                    self.state.scroller_grabbed_at = None;
-
-                    return event::Status::Captured;
-                }
-                Event::Mouse(mouse::Event::CursorMoved { .. })
-                | Event::Touch(touch::Event::FingerMoved { .. }) => {
-                    if let (Some(scrollbar), Some(scroller_grabbed_at)) =
-                        (scrollbar, self.state.scroller_grabbed_at)
-                    {
-                        self.state.scroll_to(
-                            scrollbar.scroll_percentage(
-                                scroller_grabbed_at,
-                                cursor_position,
-                            ),
-                            bounds,
-                            content_bounds,
-                        );
-
-                        self.notify_on_scroll(bounds, content_bounds, shell);
-
-                        return event::Status::Captured;
-                    }
-                }
-                _ => {}
-            }
-        } else if is_mouse_over_scrollbar {
-            match event {
-                Event::Mouse(mouse::Event::ButtonPressed(
-                    mouse::Button::Left,
-                ))
-                | Event::Touch(touch::Event::FingerPressed { .. }) => {
-                    if let Some(scrollbar) = scrollbar {
-                        if let Some(scroller_grabbed_at) =
-                            scrollbar.grab_scroller(cursor_position)
-                        {
-                            self.state.scroll_to(
-                                scrollbar.scroll_percentage(
-                                    scroller_grabbed_at,
-                                    cursor_position,
-                                ),
-                                bounds,
-                                content_bounds,
-                            );
-
-                            self.state.scroller_grabbed_at =
-                                Some(scroller_grabbed_at);
-
-                            self.notify_on_scroll(
-                                bounds,
-                                content_bounds,
-                                shell,
-                            );
-
-                            return event::Status::Captured;
-                        }
-                    }
-                }
-                _ => {}
-            }
-        }
-
-        event::Status::Ignored
     }
 
     fn mouse_interaction(
@@ -429,38 +674,22 @@ where
         _viewport: &Rectangle,
         renderer: &Renderer,
     ) -> mouse::Interaction {
-        let bounds = layout.bounds();
+        mouse_interaction(
-        let content_layout = layout.children().next().unwrap();
+            &self.state,
-        let content_bounds = content_layout.bounds();
+            layout,
-        let scrollbar = self.scrollbar(bounds, content_bounds);
+            cursor_position,
-
+            self.scrollbar_width,
-        let is_mouse_over = bounds.contains(cursor_position);
+            self.scrollbar_margin,
-        let is_mouse_over_scrollbar = scrollbar
+            self.scroller_width,
-            .as_ref()
+            |layout, cursor_position, viewport| {
-            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+                self.content.mouse_interaction(
-            .unwrap_or(false);
+                    layout,
-
+                    cursor_position,
-        if is_mouse_over_scrollbar || self.state.is_scroller_grabbed() {
+                    viewport,
-            mouse::Interaction::Idle
+                    renderer,
-        } else {
+                )
-            let offset = self.state.offset(bounds, content_bounds);
+            },
-
+        )
-            let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
-                Point::new(cursor_position.x, cursor_position.y + offset as f32)
-            } else {
-                Point::new(cursor_position.x, -1.0)
-            };
-
-            self.content.mouse_interaction(
-                content_layout,
-                cursor_position,
-                &Rectangle {
-                    y: bounds.y + offset as f32,
-                    ..bounds
-                },
-                renderer,
-            )
-        }
     }
 
     fn draw(
@@ -471,103 +700,25 @@ where
         cursor_position: Point,
         _viewport: &Rectangle,
     ) {
-        let bounds = layout.bounds();
+        draw(
-        let content_layout = layout.children().next().unwrap();
+            &self.state,
-        let content_bounds = content_layout.bounds();
+            renderer,
-        let offset = self.state.offset(bounds, content_bounds);
+            layout,
-        let scrollbar = self.scrollbar(bounds, content_bounds);
+            cursor_position,
-
+            self.scrollbar_width,
-        let is_mouse_over = bounds.contains(cursor_position);
+            self.scrollbar_margin,
-        let is_mouse_over_scrollbar = scrollbar
+            self.scroller_width,
-            .as_ref()
+            self.style_sheet.as_ref(),
-            .map(|scrollbar| scrollbar.is_mouse_over(cursor_position))
+            |renderer, layout, cursor_position, viewport| {
-            .unwrap_or(false);
+                self.content.draw(
-
+                    renderer,
-        let cursor_position = if is_mouse_over && !is_mouse_over_scrollbar {
+                    style,
-            Point::new(cursor_position.x, cursor_position.y + offset as f32)
+                    layout,
-        } else {
+                    cursor_position,
-            Point::new(cursor_position.x, -1.0)
+                    viewport,
-        };
+                )
-
+            },
-        if let Some(scrollbar) = scrollbar {
+        )
-            renderer.with_layer(bounds, |renderer| {
-                renderer.with_translation(
-                    Vector::new(0.0, -(offset as f32)),
-                    |renderer| {
-                        self.content.draw(
-                            renderer,
-                            style,
-                            content_layout,
-                            cursor_position,
-                            &Rectangle {
-                                y: bounds.y + offset as f32,
-                                ..bounds
-                            },
-                        );
-                    },
-                );
-            });
-
-            let style = if self.state.is_scroller_grabbed() {
-                self.style_sheet.dragging()
-            } else if is_mouse_over_scrollbar {
-                self.style_sheet.hovered()
-            } else {
-                self.style_sheet.active()
-            };
-
-            let is_scrollbar_visible =
-                style.background.is_some() || style.border_width > 0.0;
-
-            renderer.with_layer(
-                Rectangle {
-                    width: bounds.width + 2.0,
-                    height: bounds.height + 2.0,
-                    ..bounds
-                },
-                |renderer| {
-                    if is_scrollbar_visible {
-                        renderer.fill_quad(
-                            renderer::Quad {
-                                bounds: scrollbar.bounds,
-                                border_radius: style.border_radius,
-                                border_width: style.border_width,
-                                border_color: style.border_color,
-                            },
-                            style.background.unwrap_or(Background::Color(
-                                Color::TRANSPARENT,
-                            )),
-                        );
-                    }
-
-                    if is_mouse_over
-                        || self.state.is_scroller_grabbed()
-                        || is_scrollbar_visible
-                    {
-                        renderer.fill_quad(
-                            renderer::Quad {
-                                bounds: scrollbar.scroller.bounds,
-                                border_radius: style.scroller.border_radius,
-                                border_width: style.scroller.border_width,
-                                border_color: style.scroller.border_color,
-                            },
-                            style.scroller.color,
-                        );
-                    }
-                },
-            );
-        } else {
-            self.content.draw(
-                renderer,
-                style,
-                content_layout,
-                cursor_position,
-                &Rectangle {
-                    y: bounds.y + offset as f32,
-                    ..bounds
-                },
-            );
-        }
     }
 
     fn hash_layout(&self, state: &mut Hasher) {

pure/src/widget.rs

@@ -4,6 +4,7 @@ mod column;
 mod container;
 mod element;
 mod row;
+mod scrollable;
 mod text;
 mod tree;
 
@@ -13,6 +14,7 @@ pub use column::Column;
 pub use container::Container;
 pub use element::Element;
 pub use row::Row;
+pub use scrollable::Scrollable;
 pub use text::Text;
 pub use tree::Tree;
 
@@ -95,6 +97,13 @@ pub fn row<'a, Message, Renderer>() -> Row<'a, Message, Renderer> {
     Row::new()
 }
 
+pub fn scrollable<'a, Message, Renderer>() -> Scrollable<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+{
+    Scrollable::new()
+}
+
 pub fn button<'a, Message, Renderer>(
     content: impl Into<Element<'a, Message, Renderer>>,
 ) -> Button<'a, Message, Renderer> {

pure/src/widget/button.rs

@@ -152,7 +152,7 @@ where
             cursor_position,
             shell,
             &self.on_press,
-            || tree.state_mut::<State>(),
+            || tree.state.downcast_mut::<State>(),
         )
     }
 
@@ -174,7 +174,7 @@ where
             cursor_position,
             self.on_press.is_some(),
             self.style_sheet.as_ref(),
-            || tree.state::<State>(),
+            || tree.state.downcast_ref::<State>(),
         );
 
         self.content.as_widget().draw(

pure/src/widget/scrollable.rs

@@ -0,0 +1,268 @@
+use crate::widget::{Column, Tree};
+use crate::{Element, Widget};
+
+use iced_native::event::{self, Event};
+use iced_native::layout::{self, Layout};
+use iced_native::mouse;
+use iced_native::renderer;
+use iced_native::widget::scrollable;
+use iced_native::{
+    Alignment, Clipboard, Hasher, Length, Padding, Point, Rectangle, Shell,
+};
+
+pub use iced_style::scrollable::StyleSheet;
+
+use std::any::{self, Any};
+
+/// A widget that can vertically display an infinite amount of content with a
+/// scrollbar.
+#[allow(missing_debug_implementations)]
+pub struct Scrollable<'a, Message, Renderer> {
+    height: Length,
+    scrollbar_width: u16,
+    scrollbar_margin: u16,
+    scroller_width: u16,
+    content: Column<'a, Message, Renderer>,
+    on_scroll: Option<Box<dyn Fn(f32) -> Message>>,
+    style_sheet: Box<dyn StyleSheet + 'a>,
+}
+
+impl<'a, Message, Renderer: iced_native::Renderer>
+    Scrollable<'a, Message, Renderer>
+{
+    /// Creates a new [`Scrollable`] with the given [`State`].
+    pub fn new() -> Self {
+        Scrollable {
+            height: Length::Shrink,
+            scrollbar_width: 10,
+            scrollbar_margin: 0,
+            scroller_width: 10,
+            content: Column::new(),
+            on_scroll: None,
+            style_sheet: Default::default(),
+        }
+    }
+
+    /// Sets the vertical spacing _between_ elements.
+    ///
+    /// Custom margins per element do not exist in Iced. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, units: u16) -> Self {
+        self.content = self.content.spacing(units);
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Scrollable`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.content = self.content.padding(padding);
+        self
+    }
+
+    /// Sets the width of the [`Scrollable`].
+    pub fn width(mut self, width: Length) -> Self {
+        self.content = self.content.width(width);
+        self
+    }
+
+    /// Sets the height of the [`Scrollable`].
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// Sets the horizontal alignment of the contents of the [`Scrollable`] .
+    pub fn align_items(mut self, align_items: Alignment) -> Self {
+        self.content = self.content.align_items(align_items);
+        self
+    }
+
+    /// Sets the scrollbar width of the [`Scrollable`] .
+    /// Silently enforces a minimum value of 1.
+    pub fn scrollbar_width(mut self, scrollbar_width: u16) -> Self {
+        self.scrollbar_width = scrollbar_width.max(1);
+        self
+    }
+
+    /// Sets the scrollbar margin of the [`Scrollable`] .
+    pub fn scrollbar_margin(mut self, scrollbar_margin: u16) -> Self {
+        self.scrollbar_margin = scrollbar_margin;
+        self
+    }
+
+    /// Sets the scroller width of the [`Scrollable`] .
+    ///
+    /// It silently enforces a minimum value of 1.
+    pub fn scroller_width(mut self, scroller_width: u16) -> Self {
+        self.scroller_width = scroller_width.max(1);
+        self
+    }
+
+    /// Sets a function to call when the [`Scrollable`] is scrolled.
+    ///
+    /// The function takes the new relative offset of the [`Scrollable`]
+    /// (e.g. `0` means top, while `1` means bottom).
+    pub fn on_scroll(mut self, f: impl Fn(f32) -> Message + 'static) -> Self {
+        self.on_scroll = Some(Box::new(f));
+        self
+    }
+
+    /// Sets the style of the [`Scrollable`] .
+    pub fn style(
+        mut self,
+        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+    ) -> Self {
+        self.style_sheet = style_sheet.into();
+        self
+    }
+
+    /// Adds an element to the [`Scrollable`].
+    pub fn push<E>(mut self, child: E) -> Self
+    where
+        E: Into<Element<'a, Message, Renderer>>,
+    {
+        self.content = self.content.push(child);
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Scrollable<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+{
+    fn tag(&self) -> any::TypeId {
+        any::TypeId::of::<scrollable::State>()
+    }
+
+    fn state(&self) -> Box<dyn Any> {
+        Box::new(scrollable::State::new())
+    }
+
+    fn children(&self) -> &[Element<Message, Renderer>] {
+        self.content.children()
+    }
+
+    fn width(&self) -> Length {
+        Widget::<Message, Renderer>::width(&self.content)
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        use std::hash::Hash;
+
+        self.tag().hash(state);
+        self.height.hash(state);
+        self.content.hash_layout(state)
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        scrollable::layout(
+            renderer,
+            limits,
+            Widget::<Message, Renderer>::width(self),
+            self.height,
+            |renderer, limits| self.content.layout(renderer, limits),
+        )
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        scrollable::update(
+            tree.state.downcast_mut::<scrollable::State>(),
+            event,
+            layout,
+            cursor_position,
+            clipboard,
+            shell,
+            self.scrollbar_width,
+            self.scrollbar_margin,
+            self.scroller_width,
+            &self.on_scroll,
+            |event, layout, cursor_position, clipboard, shell| {
+                self.content.on_event(
+                    &mut tree.children[0],
+                    event,
+                    layout,
+                    cursor_position,
+                    renderer,
+                    clipboard,
+                    shell,
+                )
+            },
+        )
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+    ) {
+        scrollable::draw(
+            tree.state.downcast_ref::<scrollable::State>(),
+            renderer,
+            layout,
+            cursor_position,
+            self.scrollbar_width,
+            self.scrollbar_margin,
+            self.scroller_width,
+            self.style_sheet.as_ref(),
+            |renderer, layout, cursor_position, viewport| {
+                self.content.draw(
+                    &tree.children[0],
+                    renderer,
+                    style,
+                    layout,
+                    cursor_position,
+                    viewport,
+                )
+            },
+        )
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        scrollable::mouse_interaction(
+            tree.state.downcast_ref::<scrollable::State>(),
+            layout,
+            cursor_position,
+            self.scrollbar_width,
+            self.scrollbar_margin,
+            self.scroller_width,
+            |layout, cursor_position, viewport| {
+                self.content.mouse_interaction(
+                    &tree.children[0],
+                    layout,
+                    cursor_position,
+                    viewport,
+                    renderer,
+                )
+            },
+        )
+    }
+}

pure/src/widget/tree.rs

@@ -4,7 +4,7 @@ use std::any::{self, Any};
 
 pub struct Tree {
     pub tag: any::TypeId,
-    pub state: Box<dyn Any>,
+    pub state: State,
     pub children: Vec<Tree>,
 }
 
@@ -12,7 +12,7 @@ impl Tree {
     pub fn empty() -> Self {
         Self {
             tag: any::TypeId::of::<()>(),
-            state: Box::new(()),
+            state: State(Box::new(())),
             children: Vec::new(),
         }
     }
@@ -22,7 +22,7 @@ impl Tree {
     ) -> Self {
         Self {
             tag: element.as_widget().tag(),
-            state: element.as_widget().state(),
+            state: State(element.as_widget().state()),
             children: element
                 .as_widget()
                 .children()
@@ -58,18 +58,22 @@ impl Tree {
             *self = Self::new(new);
         }
     }
+}
 
-    pub fn state<T>(&self) -> &T
+pub struct State(Box<dyn Any>);
+
+impl State {
+    pub fn downcast_ref<T>(&self) -> &T
     where
         T: 'static,
     {
-        self.state.downcast_ref().expect("Downcast widget state")
+        self.0.downcast_ref().expect("Downcast widget state")
     }
 
-    pub fn state_mut<T>(&mut self) -> &mut T
+    pub fn downcast_mut<T>(&mut self) -> &mut T
     where
         T: 'static,
     {
-        self.state.downcast_mut().expect("Downcast widget state")
+        self.0.downcast_mut().expect("Downcast widget state")
     }
 }