Simplify scrollable styling API

examples/scrollable/src/main.rs

@@ -1,13 +1,11 @@
 use iced::executor;
-use iced::theme;
+use iced::widget::scrollable::Properties;
-use iced::widget::scrollable::{Appearance, Properties, Scrollbar, Scroller};
 use iced::widget::{
     button, column, container, horizontal_space, progress_bar, radio, row,
     scrollable, slider, text, vertical_space,
 };
 use iced::{
-    Alignment, Application, Border, Color, Command, Element, Length, Settings,
+    Alignment, Application, Color, Command, Element, Length, Settings, Theme,
-    Theme,
 };
 
 use once_cell::sync::Lazy;
@@ -263,7 +261,6 @@ impl Application for ScrollableDemo {
                         .scroller_width(self.scroller_width)
                         .alignment(self.alignment),
                 ))
-                .style(theme::Scrollable::custom(ScrollbarCustomStyle))
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
                 Direction::Multi => scrollable(
@@ -311,9 +308,6 @@ impl Application for ScrollableDemo {
                         vertical: properties,
                     }
                 })
-                .style(theme::Scrollable::Custom(Box::new(
-                    ScrollbarCustomStyle,
-                )))
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
             });
@@ -350,49 +344,6 @@ impl Application for ScrollableDemo {
     }
 }
 
-struct ScrollbarCustomStyle;
-
-impl scrollable::StyleSheet for ScrollbarCustomStyle {
-    type Style = Theme;
-
-    fn appearance(&self, style: &Self::Style) -> Appearance {
-        style.appearance(&theme::Scrollable::Default)
-    }
-
-    fn active(&self, style: &Self::Style) -> Scrollbar {
-        style.active(&theme::Scrollable::Default)
-    }
-
-    fn hovered(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        style.hovered(&theme::Scrollable::Default, is_mouse_over_scrollbar)
-    }
-
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        if is_mouse_over_scrollbar {
-            Scrollbar {
-                background: style
-                    .active(&theme::Scrollable::default())
-                    .background,
-                border: Border::with_radius(2),
-                scroller: Scroller {
-                    color: Color::from_rgb8(250, 85, 134),
-                    border: Border::with_radius(2),
-                },
-            }
-        } else {
-            self.active(style)
-        }
-    }
-}
-
 fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance {
     progress_bar::Appearance {
         background: theme.extended_palette().background.strong.color.into(),

style/src/scrollable.rs

@@ -1,6 +1,18 @@
 //! Change the appearance of a scrollable.
+use crate::container;
 use crate::core::{Background, Border, Color};
 
+/// The appearance of a scrolable.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The [`container::Appearance`] of a scrollable.
+    pub container: container::Appearance,
+    /// The [`Scrollbar`] appearance.
+    pub scrollbar: Scrollbar,
+    /// The [`Background`] of the gap between a horizontal and vertical scrollbar.
+    pub gap: Option<Background>,
+}
+
 /// The appearance of the scrollbar of a scrollable.
 #[derive(Debug, Clone, Copy)]
 pub struct Scrollbar {
@@ -21,54 +33,23 @@ pub struct Scroller {
     pub border: Border,
 }
 
-/// The appearance of a scrolable.
-#[derive(Debug, Clone, Copy)]
-pub struct Appearance {
-    /// The [`Background`] of a scrollable.
-    pub background: Option<Background>,
-    /// The [`Background`] of the gap between a horizontal and vertical scrollbar.
-    pub gap: Option<Background>,
-}
-
 /// A set of rules that dictate the style of a scrollable.
 pub trait StyleSheet {
     /// The supported style of the [`StyleSheet`].
     type Style: Default;
 
-    /// Produces the style of the scrollable container.
+    /// Produces the [`Appearance`] of an active scrollable.
-    fn appearance(&self, style: &Self::Style) -> Appearance;
+    fn active(&self, style: &Self::Style) -> Appearance;
 
-    /// Produces the style of an active scrollbar.
+    /// Produces the [`Appearance`] of a scrollable when it is being hovered.
-    fn active(&self, style: &Self::Style) -> Scrollbar;
-
-    /// Produces the style of a scrollbar when the scrollable is being hovered.
     fn hovered(
         &self,
         style: &Self::Style,
         is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar;
+    ) -> Appearance;
 
-    /// Produces the style of a scrollbar that is being dragged.
+    /// Produces the [`Appearance`] of a scrollable when it is being dragged.
-    fn dragging(&self, style: &Self::Style) -> Scrollbar {
+    fn dragging(&self, style: &Self::Style) -> Appearance {
         self.hovered(style, true)
     }
-
-    /// Produces the style of an active horizontal scrollbar.
-    fn active_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.active(style)
-    }
-
-    /// Produces the style of a horizontal scrollbar when the scrollable is being hovered.
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        self.hovered(style, is_mouse_over_scrollbar)
-    }
-
-    /// Produces the style of a horizontal scrollbar that is being dragged.
-    fn dragging_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.hovered_horizontal(style, true)
-    }
 }

style/src/theme.rs

@@ -1188,32 +1188,22 @@ impl Scrollable {
 impl scrollable::StyleSheet for Theme {
     type Style = Scrollable;
 
-    fn appearance(&self, style: &Self::Style) -> scrollable::Appearance {
+    fn active(&self, style: &Self::Style) -> scrollable::Appearance {
         match style {
             Scrollable::Default => {
                 let palette = self.extended_palette();
 
                 scrollable::Appearance {
-                    background: None,
+                    container: container::Appearance::default(),
-                    gap: Some(palette.background.weak.color.into()),
+                    scrollbar: scrollable::Scrollbar {
-                }
+                        background: Some(palette.background.weak.color.into()),
-            }
-            Scrollable::Custom(custom) => custom.appearance(self),
-        }
-    }
-
-    fn active(&self, style: &Self::Style) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => {
-                let palette = self.extended_palette();
-
-                scrollable::Scrollbar {
-                    background: Some(palette.background.weak.color.into()),
-                    border: Border::with_radius(2),
-                    scroller: scrollable::Scroller {
-                        color: palette.background.strong.color,
                         border: Border::with_radius(2),
+                        scroller: scrollable::Scroller {
+                            color: palette.background.strong.color,
+                            border: Border::with_radius(2),
+                        },
                     },
+                    gap: None,
                 }
             }
             Scrollable::Custom(custom) => custom.active(self),
@@ -1224,19 +1214,24 @@ impl scrollable::StyleSheet for Theme {
         &self,
         style: &Self::Style,
         is_mouse_over_scrollbar: bool,
-    ) -> scrollable::Scrollbar {
+    ) -> scrollable::Appearance {
         match style {
             Scrollable::Default => {
                 if is_mouse_over_scrollbar {
                     let palette = self.extended_palette();
 
-                    scrollable::Scrollbar {
+                    scrollable::Appearance {
-                        background: Some(palette.background.weak.color.into()),
+                        scrollbar: scrollable::Scrollbar {
-                        border: Border::with_radius(2),
+                            background: Some(
-                        scroller: scrollable::Scroller {
+                                palette.background.weak.color.into(),
-                            color: palette.primary.strong.color,
+                            ),
                             border: Border::with_radius(2),
+                            scroller: scrollable::Scroller {
+                                color: palette.primary.strong.color,
+                                border: Border::with_radius(2),
+                            },
                         },
+                        ..self.active(style)
                     }
                 } else {
                     self.active(style)
@@ -1248,42 +1243,12 @@ impl scrollable::StyleSheet for Theme {
         }
     }
 
-    fn dragging(&self, style: &Self::Style) -> scrollable::Scrollbar {
+    fn dragging(&self, style: &Self::Style) -> scrollable::Appearance {
         match style {
             Scrollable::Default => self.hovered(style, true),
             Scrollable::Custom(custom) => custom.dragging(self),
         }
     }
-
-    fn active_horizontal(&self, style: &Self::Style) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.active(style),
-            Scrollable::Custom(custom) => custom.active_horizontal(self),
-        }
-    }
-
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.hovered(style, is_mouse_over_scrollbar),
-            Scrollable::Custom(custom) => {
-                custom.hovered_horizontal(self, is_mouse_over_scrollbar)
-            }
-        }
-    }
-
-    fn dragging_horizontal(
-        &self,
-        style: &Self::Style,
-    ) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.hovered_horizontal(style, true),
-            Scrollable::Custom(custom) => custom.dragging_horizontal(self),
-        }
-    }
 }
 
 /// The style of text.

widget/src/scrollable.rs

@@ -1,4 +1,5 @@
 //! Navigate an endless amount of content with a scrollbar.
+use crate::container;
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::layout;
@@ -880,18 +881,23 @@ pub fn draw<Theme, Renderer>(
         _ => mouse::Cursor::Unavailable,
     };
 
-    // Draw background.
+    let appearance = if state.y_scroller_grabbed_at.is_some()
-    let appearence = theme.appearance(style);
+        || state.x_scroller_grabbed_at.is_some()
+    {
+        theme.dragging(style)
+    } else if cursor_over_scrollable.is_some() {
+        theme.hovered(style, mouse_over_y_scrollbar || mouse_over_x_scrollbar)
+    } else {
+        theme.active(style)
+    };
 
-    if let Some(background) = appearence.background {
+    let idle_scrollbar = theme.active(style).scrollbar;
-        renderer.fill_quad(
+
-            renderer::Quad {
+    container::draw_background(
-                bounds,
+        renderer,
-                ..Default::default()
+        &appearance.container,
-            },
+        layout.bounds(),
-            background,
+    );
-        );
-    }
 
     // Draw inner content
     if scrollbars.active() {
@@ -917,7 +923,6 @@ pub fn draw<Theme, Renderer>(
             |renderer: &mut Renderer,
              style: Scrollbar,
              scrollbar: &internals::Scrollbar| {
-                //track
                 if scrollbar.bounds.width > 0.0
                     && scrollbar.bounds.height > 0.0
                     && (style.background.is_some()
@@ -936,7 +941,6 @@ pub fn draw<Theme, Renderer>(
                     );
                 }
 
-                //thumb
                 if scrollbar.scroller.bounds.width > 0.0
                     && scrollbar.scroller.bounds.height > 0.0
                     && (style.scroller.color != Color::TRANSPARENT
@@ -961,35 +965,37 @@ pub fn draw<Theme, Renderer>(
                 ..bounds
             },
             |renderer| {
-                //draw y scrollbar
                 if let Some(scrollbar) = scrollbars.y {
-                    let style = if state.y_scroller_grabbed_at.is_some() {
+                    draw_scrollbar(
-                        theme.dragging(style)
+                        renderer,
-                    } else if cursor_over_scrollable.is_some() {
+                        if mouse_over_y_scrollbar
-                        theme.hovered(style, mouse_over_y_scrollbar)
+                            || state.y_scroller_grabbed_at.is_some()
-                    } else {
+                        {
-                        theme.active(style)
+                            appearance.scrollbar
-                    };
+                        } else {
-
+                            idle_scrollbar
-                    draw_scrollbar(renderer, style, &scrollbar);
+                        },
+                        &scrollbar,
+                    );
                 }
 
-                //draw x scrollbar
                 if let Some(scrollbar) = scrollbars.x {
-                    let style = if state.x_scroller_grabbed_at.is_some() {
+                    draw_scrollbar(
-                        theme.dragging_horizontal(style)
+                        renderer,
-                    } else if cursor_over_scrollable.is_some() {
+                        if mouse_over_x_scrollbar
-                        theme.hovered_horizontal(style, mouse_over_x_scrollbar)
+                            || state.x_scroller_grabbed_at.is_some()
-                    } else {
+                        {
-                        theme.active_horizontal(style)
+                            appearance.scrollbar
-                    };
+                        } else {
-
+                            idle_scrollbar
-                    draw_scrollbar(renderer, style, &scrollbar);
+                        },
+                        &scrollbar,
+                    );
                 }
 
-                //draw filler quad
                 if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
-                    let background = appearence.gap.or(appearence.background);
+                    let background =
+                        appearance.gap.or(appearance.container.background);
 
                     if let Some(background) = background {
                         renderer.fill_quad(