Introduce an appearance for a scrollable, ability to customize the scrollbar gap.

Update scrollable.rs

examples/scrollable/src/main.rs

@@ -1,6 +1,6 @@
 use iced::executor;
 use iced::theme;
-use iced::widget::scrollable::{Properties, Scrollbar, Scroller};
+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,
@@ -355,6 +355,10 @@ 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)
     }

style/src/scrollable.rs

@@ -1,14 +1,14 @@
 //! Change the appearance of a scrollable.
 use crate::core::{Background, Border, Color};
 
-/// The appearance of a scrollable.
+/// The appearance of the scrollbar of a scrollable.
 #[derive(Debug, Clone, Copy)]
 pub struct Scrollbar {
-    /// The [`Background`] of a scrollable.
+    /// The [`Background`] of a scrollbar.
     pub background: Option<Background>,
-    /// The [`Border`] of a scrollable.
+    /// The [`Border`] of a scrollbar.
     pub border: Border,
-    /// The appearance of the [`Scroller`] of a scrollable.
+    /// The appearance of the [`Scroller`] of a scrollbar.
     pub scroller: Scroller,
 }
 
@@ -21,11 +21,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.
+    fn appearance(&self, style: &Self::Style) -> Appearance;
+
     /// Produces the style of an active scrollbar.
     fn active(&self, style: &Self::Style) -> Scrollbar;
 

style/src/theme.rs

@@ -1188,6 +1188,20 @@ impl Scrollable {
 impl scrollable::StyleSheet for Theme {
     type Style = Scrollable;
 
+    fn appearance(&self, style: &Self::Style) -> scrollable::Appearance {
+        match style {
+            Scrollable::Default => {
+                let palette = self.extended_palette();
+
+                scrollable::Appearance {
+                    background: None,
+                    gap: Some(palette.background.weak.color.into()),
+                }
+            }
+            Scrollable::Custom(custom) => custom.appearance(self),
+        }
+    }
+
     fn active(&self, style: &Self::Style) -> scrollable::Scrollbar {
         match style {
             Scrollable::Default => {

widget/src/scrollable.rs

@@ -15,7 +15,9 @@ use crate::core::{
 };
 use crate::runtime::Command;
 
-pub use crate::style::scrollable::{Scrollbar, Scroller, StyleSheet};
+pub use crate::style::scrollable::{
+    Appearance, Scrollbar, Scroller, StyleSheet,
+};
 pub use operation::scrollable::{AbsoluteOffset, RelativeOffset};
 
 /// A widget that can vertically display an infinite amount of content with a
@@ -878,6 +880,19 @@ pub fn draw<Theme, Renderer>(
         _ => mouse::Cursor::Unavailable,
     };
 
+    // Draw background.
+    let appearence = theme.appearance(style);
+
+    if let Some(background) = appearence.background {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                ..Default::default()
+            },
+            background,
+        );
+    }
+
     // Draw inner content
     if scrollbars.active() {
         renderer.with_layer(bounds, |renderer| {
@@ -971,6 +986,26 @@ pub fn draw<Theme, Renderer>(
 
                     draw_scrollbar(renderer, style, &scrollbar);
                 }
+
+                //draw filler quad
+                if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
+                    let background = appearence.gap.or(appearence.background);
+
+                    if let Some(background) = background {
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: Rectangle {
+                                    x: y.bounds.x,
+                                    y: x.bounds.y,
+                                    width: y.bounds.width,
+                                    height: x.bounds.height,
+                                },
+                                ..renderer::Quad::default()
+                            },
+                            background,
+                        );
+                    }
+                }
             },
         );
     } else {